jQuery Element Filter-Method : สอน method และ property ของ Element Filter-Method, เรียน method และ property ของ Element Filter-Method
 

Reference

Reference ในเว็บไซต์ Function.in.th เป็นการนำเสนอความรู้ในรูปแบบของแหล่งอ้างอิงของคำสั่งต่าง ๆ ที่ใช้ในการเขียนโปรแกรม โดยผู้ที่สนใจสามารถเข้ามาเรียนรู้การใช้งานคำสั่งของการเขียนโปรแกรมเหล่านี้ได้ ผ่านทาง URL code.function.in.th ทั้งนี้ผู้อ่านยังสามารถร่วมแสดงความคิดเห็นบนเนื้อหาที่มีสอนได้ ซึ่งถือเป็นการส่งเสริมให้มีการแลกเปลี่ยนประสบการณ์และความรู้ระหว่างผู้อ่านด้วยกันเอง
  • end () เป็นการสั่งให้สิ้นสุด set ปัจจุบัน แล้วย้อนกลับไปยัง set ก่อนหน้า 1 ครั้ง
    andSelf () ใช้ในการเพิ่มตัว element ของเรา เข้าไปใน set ด้วย
    is ( selector ) ใช้ตรวจสอบว่าใน set นั้นๆ มี element ที่มี selector ตามที่กำหนด อย่างน้อย 1 element ใช่หรือไม่
    add ( selector, context ) ใช้เพิ่ม element ที่มี selector ตรงตามที่กำหนด และเป็น chlid element ของ element ที่ตรงตาม context ที่กำหนด เข้าไปใน set
    add ( html | selector | element | array-element ) ใช้เพิ่ม element ที่กำหนดเข้าไปใน set
    not ( selector | element | array-element ) ใช้ลบ element ที่กำหนดออกจาก set
    not ( function ( index ) ) ใช้ลบ element ที่กำหนดออกจาก set โดยถ้า function return false คือไม่ต้องการ element นั้นๆ
    get ( index ) คืนค่า element หรือ array element
    eq ( index ) ใช้ในการอ้างถึง เพียง element เดียวภายใน set โดยจะอ้างถึง element ตำแหน่งที่กำหนดที่อยู่ภายใน set
    index ( element ) คืนค่า ตำแหน่งที่ ของ element ที่กำหนด ภายใน set
    slice ( begin, end ) ใช้คืนค่า element จาก set โดยจะเริ่มจาก ตำแหน่ง begin จนถึง end
    first () ใช้ในการคืนค่า element ตัวแรกที่อยู่ใน set
    last () ใช้ในการคืนค่า element ตัวสุดท้ายที่อยู่ใน set
    find ( selector ) ใช้ในการค้นหา child element ในทุกระดับ โดยจะค้นหา ทุก element ภายใน set
    filter ( selector | function ) ใช้ค้นหา element ใน set โดยจะต้องตรงตามเงื่อนไข selector ที่กำหนด
    has ( selector ) ใช้ในการคืนค่า element ที่มี child element ตาม selector ที่กำหนด โดยจะกรอง ทุก element ภายใน set
    has ( contained ) ใช้ในการคืนค่า element ที่มี child element ตาม contained ที่กำหนด โดยจะกรอง ทุก element ภายใน set
    contains ( text ) ใช้คืนค่า element ที่มี text ที่กำหนดอยู่ภายใน tag
    children ( [ selector ] ) ใช้ในการคืนค่า child element ทั้งหมด ของทุก element ภายใน set
    parent ( [ selector ] ) ใช้ในการคืนค่า parent ของ ทุก element ภายใน set
    parents ( [ selector ] ) ใช้ในการคืนค่า parent ทุกระดับ ของ ทุก element ภายใน set
    parentsUntil ( [ selector ] ) ใช้ในการคืนค่า parent ทั้งหมดที่อยู่ก่อน parent ที่ตรงกับ selector ที่กำหนด ( คือจะมีการหา parent ขึ้นไปเรื่อยๆ จนกว่าจะเจอ parent ที่มี selector ตรงตามที่กำหนด )
    offsetParent () ใช้ในการคืนค่า parent element ที่ใกล้ที่สุด ของ ทุก element ภายใน set
    closest ( selector ) ใช้ในการคืนค่า parent element ( ของ ทุก element ภายใน set ) ที่ใกล้ที่สุด ที่มี selector ตามที่กำหนด
    closest ( selector, context ) ใช้ในการคืนค่า parent element ( ของ ทุก element ภายใน set ) ที่ใกล้ที่สุด ที่มี selector ตามที่กำหนด
    siblings ( [ selector ] ) ใช้ในการคืนค่า element ตัวก่อนๆหน้า และ ตัวถัดๆไป ทั้งหมด
    next ( [ selector ] ) ใช้ในการคืนค่า element ตัวถัดไป หรือ element ตัวถัดไป ตัวแรก ที่มี selector ที่กำหนด
    nextAll ( [ selector ] ) ใช้ในการคืนค่า element ตัวถัดๆไปทั้งหมด หรือ element ตัวถัดๆไปทั้งหมด ที่มี selector ที่กำหนด
    nextUntil ( [ selector ] ) ใช้ในการคืนค่า element ตัวถัดๆไปทั้งหมด จนถึง selector ( โดยไม่รวม ตัวของมัน และ ตัวที่อยู่ใน selector )
    prev ( [ selector ] ) ใช้ในการคืนค่า element ตัวก่อนหน้า หรือ element ตัวก่อนหน้า ตัวแรก ที่มี selector ที่กำหนด
    prevAll ( [ selector ] ) ใช้ในการคืนค่า element ตัวก่อนๆหน้าทั้งหมด หรือ element ตัวก่อนๆหน้าทั้งหมด ที่มี selector ที่กำหนด
    prevUntil ( [ selector ] ) ใช้ในการคืนค่า element ตัวก่อนๆหน้าทั้งหมด จนถึง selector ( โดยไม่รวม ตัวของมัน และ ตัวที่อยู่ใน selector )
  • syntax :
    end ()

    return type :
    void, element

    content :
    เป็นการสั่งให้สิ้นสุด set ปัจจุบัน แล้วย้อนกลับไปยัง set ก่อนหน้า 1 ครั้ง

    example :
    $("div").nextUntil("div#special").css("text-decoration", "underline").end().css("font-weight", "bold");
    // คือคำสั่ง css("font-weight", "bold") จะเกิดขึ้นกับ $("div")
    // แต่คำสั่ง css("text-decoration", "underline") จะเกิดขึ้นกับ $("div").nextUntil("div#special")

  • syntax :
    andSelf ()

    return type :
    void, element 

    content :
    ใช้ในการเพิ่มตัว element ของเรา เข้าไปใน set ด้วย

    example :
    $("div").find("b").andSelf().show();
    $("div").nextAll().andSelf().show();

  • syntax :
    is ( selector )

    return type :
    boolean

    content :
    ใช้ตรวจสอบว่าใน set นั้นๆ มี element ที่มี selector ตามที่กำหนด อย่างน้อย 1 element ใช่หรือไม่

    example :
    $("*").is("img");

  • syntax :
    add ( selector, context )

    return type :
    void, element

    content :
    ใช้เพิ่ม element ที่มี selector ตรงตามที่กำหนด และเป็น chlid element 
    ของ element ที่ตรงตาม context ที่กำหนด เข้าไปใน set

    example :
    $("div").add("span", "#dialog").show();

  • syntax :
    add ( html | selector | element | array-element )

    return type :
    void, element

    content :
    ใช้เพิ่ม element ที่กำหนดเข้าไปใน set

    example :
    $("img[alt]").add("img[title]");

  • syntax :
    not ( selector | element | array-element )

    return type :
    void, element

    content :
    ใช้ลบ element ที่กำหนดออกจาก set

    example :
    $("img").not("img[title]");

  • syntax :
    not ( function ( index ) )

    return type :
    void, element

    content :
    ใช้ลบ element ที่กำหนดออกจาก set โดยถ้า function return false คือไม่ต้องการ element นั้นๆ

    example :
    $("div").not( function ( index ) { 
    	return $(this).id != "hidden";
    } ).css("font-weight", "bold");

  • syntax :
    get ( index )

    return type :
    element

    content :
    คืนค่า element หรือ array element

    example :
    $("img[alt]")[0];
    $("img[alt]").get(0);
    $("img[alt]").get();

  • syntax :
    eq ( index )

    return type :
    void, element

    content :
    ใช้ในการอ้างถึง เพียง element เดียวภายใน set โดยจะอ้างถึง element ตำแหน่งที่กำหนดที่อยู่ภายใน set

    example :
    $("div").eq(2).css("font-weight", "bold");

  • syntax :
    index ( element )

    return type :
    number

    content :
    คืนค่า ตำแหน่งที่ ของ element ที่กำหนด ภายใน set
    จะคืนค่า -1 ถ้าหากว่าไม่พบ

    example :
    $("img").index( $img("img#findMe")[0] );

  • syntax :
    slice ( begin, end )

    return type :
    void, element

    content :
    ใช้คืนค่า element จาก set โดยจะเริ่มจาก ตำแหน่ง begin จนถึง end

    example :
    $("*").slice(0,10);
    $("*").slice(10);

  • syntax :
    first ()

    return type :
    void, element

    content :
    ใช้ในการคืนค่า element ตัวแรกที่อยู่ใน set

    example :
    alert ( $("div").first().text() );

  • syntax :
    last ()

    return type :
    void, element

    content :
    ใช้ในการคืนค่า element ตัวสุดท้ายที่อยู่ใน set

    example :
    alert ( $("div").last().text() );

  • syntax :
    find ( selector )

    return type :
    void, element

    content :
    ใช้ในการค้นหา child element ในทุกระดับ โดยจะค้นหา ทุก element ภายใน set
    และ child element เหล่านั้น ต้องมี selector ตรงตามที่กำหนด

    example :
    $("div").find("b").css("font-weight", "normal");

  • syntax :
    filter ( selector | function )

    return type :
    void, element

    content :
    ใช้ค้นหา element ใน set โดยจะต้องตรงตามเงื่อนไข selector ที่กำหนด
    โดยถ้ากำหนด parameter เป็น function แล้ว function return false หมายถึงไม่ต้องการ element นั้นๆ

    example :
    $("img[title]").filter("img[alt]");
    $("img[title]").filter(function(){
    	return this.id != "main-row";
    });

  • syntax :
    has ( selector )

    return type :
    void, element

    content :
    ใช้ในการคืนค่า element ที่มี child element ตาม selector ที่กำหนด
    โดยจะกรอง ทุก element ภายใน set

    example :
    $("li").has("ul").css("display", "hidden");

  • syntax :
    has ( contained )

    return type :
    void, element

    content :
    ใช้ในการคืนค่า element ที่มี child element ตาม contained ที่กำหนด
    โดยจะกรอง ทุก element ภายใน set

    example :
    $('li').has($("ul.group")).css("display", "hidden");

  • syntax :
    contains ( text )

    return type :
    void, element

    content :
    ใช้คืนค่า element ที่มี text ที่กำหนดอยู่ภายใน tag

    example :
    $("p").contains("function");

  • syntax :
    children ( [ selector ] )

    return type :
    void, element

    content :
    ใช้ในการคืนค่า child element ทั้งหมด ของทุก element ภายใน set
    โดยถ้ากำหนด selector ก็จะคืนค่าเฉพาะ child element ที่ตรงกับ selector ที่กำหนด 

    example :
    $("div#dialog").children(".hide").show();

  • syntax :
    parent ( [ selector ] )

    return type :
    void, element

    content :
    ใช้ในการคืนค่า parent ของ ทุก element ภายใน set 
    หรือ คืนค่า parent ของ ทุก element ภายใน set โดย parent นั้นต้องมี selector ตรงตามที่กำหนด

    example :
    $("li").parent().css("border", "1px solid black");

  • syntax :
    parents ( [ selector ] )

    return type :
    void, element

    content :
    ใช้ในการคืนค่า parent ทุกระดับ ของ ทุก element ภายใน set 
    หรือ คืนค่า parent ทุกระดับ ของ ทุก element ภายใน set โดย parent นั้นต้องมี selector ตรงตามที่กำหนด

    example :
    $("li").parent().css("border", "1px solid black");

  • syntax :
    parentsUntil ( [ selector ] )

    return type :
    void, element

    content :
    ใช้ในการคืนค่า parent ทั้งหมดที่อยู่ก่อน parent ที่ตรงกับ selector ที่กำหนด
    ( คือจะมีการหา parent ขึ้นไปเรื่อยๆ จนกว่าจะเจอ parent ที่มี selector ตรงตามที่กำหนด )
    ของ ทุก element ภายใน set

    example :
    $("b").parentsUntil(".group").css("text-decoration", "underline");

  • syntax :
    offsetParent ()

    return type :
    void, element

    content :
    ใช้ในการคืนค่า parent element ที่ใกล้ที่สุด ของ ทุก element ภายใน set

    example :
    $("li").offsetParent().css("color", "blue");

  • syntax :
    closest ( selector )

    return type :
    void, element 

    content :
    ใช้ในการคืนค่า parent element ( ของ ทุก element ภายใน set ) ที่ใกล้ที่สุด ที่มี selector ตามที่กำหนด

    example :
    $("li").closest("ul#group").show();

  • syntax :
    closest ( selector, context )

    return type :
    void, element

    content :
    ใช้ในการคืนค่า parent element ( ของ ทุก element ภายใน set ) ที่ใกล้ที่สุด ที่มี selector ตามที่กำหนด
    และเป็น chlid element ของ element ที่ตรงตาม context ที่กำหนด 

    example :
    $("li").closest("ul#group", "table#data").show();

  • syntax :
    siblings ( [ selector ] )

    return type :
    void, element

    content :
    ใช้ในการคืนค่า element ตัวก่อนๆหน้า และ ตัวถัดๆไป ทั้งหมด 
    หรือ element ตัวก่อนๆหน้า และ ตัวถัดๆไป ทั้งหมด ที่มี selector ที่กำหนด 
    ของ ทุก element ภายใน set

    example :
    $("li").siblings().css("font-weight", "bold");

  • syntax :
    next ( [ selector ] )

    return type :
    void, element

    content :
    ใช้ในการคืนค่า element ตัวถัดไป หรือ element ตัวถัดไป ตัวแรก ที่มี selector ที่กำหนด 
    ของ ทุก element ภายใน set

    example :
    $("div").next(".group").css("text-decoration", "underline");

  • syntax :
    nextAll ( [ selector ] )

    return type :
    void, element

    content :
    ใช้ในการคืนค่า element ตัวถัดๆไปทั้งหมด หรือ element ตัวถัดๆไปทั้งหมด ที่มี selector ที่กำหนด 
    ของ ทุก element ภายใน set

    example :
    $("div").nextAll(".group").css("text-decoration", "underline");

  • syntax :
    nextUntil ( [ selector ] )

    return type :
    void, element

    content :
    ใช้ในการคืนค่า element ตัวถัดๆไปทั้งหมด จนถึง selector ( โดยไม่รวม ตัวของมัน และ ตัวที่อยู่ใน selector )
    ของ ทุก element ภายใน set

    example :
    $("div").nextUntil(".group").css("text-decoration", "underline");

  • syntax :
    prev ( [ selector ] )

    return type :
    void, element

    content :
    ใช้ในการคืนค่า element ตัวก่อนหน้า หรือ element ตัวก่อนหน้า ตัวแรก ที่มี selector ที่กำหนด 
    ของ ทุก element ภายใน set

    example :
    $("div").prev(".group").css("text-decoration", "underline");

  • syntax :
    prevAll ( [ selector ] )

    return type :
    void, element

    content :
    ใช้ในการคืนค่า element ตัวก่อนๆหน้าทั้งหมด หรือ element ตัวก่อนๆหน้าทั้งหมด ที่มี selector ที่กำหนด 
    ของ ทุก element ภายใน set

    example :
    $("div").prevAll(".group").css("text-decoration", "underline");

  • syntax :
    prevUntil ( [ selector ] )

    return type :
    void, element

    content :
    ใช้ในการคืนค่า element ตัวก่อนๆหน้าทั้งหมด จนถึง selector ( โดยไม่รวม ตัวของมัน และ ตัวที่อยู่ใน selector )
    ของ ทุก element ภายใน set

    example :
    $("div").prevUntil(".group").css("text-decoration", "underline");

 
Share This Chapter Login with Facebook