filter()

filter( selector )

מחזירה: jQuery

תיאור: מצמצם סט אלמנטים בהתאם לסלקטור או פונקציה.

.filter( selector )

הוספה בגרסה: 1.0

selector

מחרוזת

מחרוזת מכילה ביטוי של סלקטור לבחירת אלמנטים.

.filter( function(index) )

הוספה בגרסה: 1.0

function(index)

פונקציה

פונקציה המשמשת כי מבחן עבור כל אלמנט בקבוצה. this - זה אלמנט נוחכי של DOM.

.filter( element )

הוספה בגרסה: 1.4

element

אלמנט

אלמנט, כדי להתאים לסט הנוחכי.

.filter( jQuery object )

הוספה בגרסה: 1.4

jQuery object

אובייקט

אובייקט jQuery הקיים כדי להתאים לסט האלמנטים הנוחכי.

אובייקט jQuery הנתון, המייצג קבוצה של אלמנטים של DOM, שיטה .filter() מייצרת אובייקט חדש jQuery מתת-קבוצה של אלמנטים בהתאמה. סלקטור שסופק נבדק בכל אלמנט; כל האלמנטים, שמתאימים לבחירה, יכללו בתוצאה.

נתבונן על דף עם רשימה פשוטה:

<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>

אנחנו יכולים ליישם את השיטה לפריטים ברשימה:

  $('li').filter(':even').css('background-color', 'red');

התוצאה של קריאה זו היא רקע אדום עבור הפריט הראשון, השלישי והחמישי, בהתאם לבחירה (להזכירכם :even ו- :odd משתמשים בסיס אינדקס 0).

list item 1
list item 2
list item 3
list item 4
list item 5

שימוש בפונקצית סינון

צורה השניה של שיטה זו מאפשרת לנו לסנן אלמנטים על ידי פונקציה, ולא עם סלקטור. עבור כל אלמנט, אם פונקציה מחזירה true, אלמנט יכלול בתוך קבוצה מסוננת; אחרת הוא יופסל. נניח שיש לנו קטע HTML מעורב קצת יותר:

<ul>
  <li><strong>list</strong> item 1 -
    one strong tag</li>
  <li><strong>list</strong> item <strong>2</strong> -
    two <span>strong tags</span></li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
  <li>list item 6</li>
</ul>

אנחנו יכולים לבחור אלמנטים של רשימה, ואחרי זה למחוק אותם לפי תוכן שלהם:

$('li').filter(function(index) {
  return $('strong', this).length == 1;
}).css('background-color', 'red');

תוצאת הפעלה קוד לעיל:

list item 1 - one strong tag
list item 2 - two strong tags
list item 3
list item 4
list item 5
list item 6

קוד הזה משנה רק אלמנט רשימה ראשון, מכיוון שהוא מכיל רק תג <strong> אחד. בפונקציה סינון, this מתייחס לכל אלמנט DOM בתור. פרמטר, שעובר לפונקציה, מצביע על אינדקס של אלמנט DOM בתוך הרשימה שמוגדרת על ידי אובייקט jQuery.

אנחנו גם יכולים להשתמש ב- אינדקס שעובר דרך פונקציה, שמצביע למקום של אלמנט שמתחיל מ-0 בסט אלמנטים שלא סונן:

$('li').filter(function(index) {
  return index % 3 == 2;
}).css('background-color', 'red');

תוצאת הפעלה קוד לעיל:

list item 1 - one strong tag
list item 2 - two strong tags
list item 3
list item 4
list item 5
list item 6

השינוי הזה בקוד יביא לפריט שלישי ושישי ברשימה, שיודגשו, מכיוון שכאן משתמשים באופרטיר מודול (%), לבחירת כל פריט עם ערך אינדקס, כשה מחולק ל - 3, נותן שארית 2.

דוגמאות

דוגמה 1

מחליף צבע של כל אלמנטים div ואחרי זה מצייר גבול מסביב של חלק מהם

    $("div").css("background", "#c8ebcc")
            .filter(".middle")
            .css("border-color", "red");

תוצאת הפעלה קוד לעיל:

נסה זאת בעצמך

דוגמה 1 - קוד מלא:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.js"></script>
 
  <script type="text/javascript" language="javascript">

  $(document).ready(function(){
    
    $("div").css("background", "#c8ebcc")
            .filter(".middle")
            .css("border-color", "red");

  });
  </script>

  <style>
  div { width:60px; height:60px; margin:5px; float:left; 
        border:2px white solid;}
  </style>

</head>
<body>
  <div></div>
  <div class="middle"></div>

  <div class="middle"></div>
  <div class="middle"></div>

  <div class="middle"></div>
  <div></div>

</body>
</html>

נסה זאת בעצמך

דוגמה 2

בוחר את כל פסקאות ומסיר אלה שאין להם class "selected" .

$("p").filter(".selected")

דוגמה 3

בוחר כל הפסקאות ומוחק מהם אלה מהם שאין להם class «selected» או שלא ראשון ברשימה.

$("p").filter(".selected, :first")

דוגמה 4

מחליף צבע של כל האלמנטים מסוג div ומוסיף מסגרת לחלק מהם.

    $("div").css("background", "#b4b0da")
            .filter(function (index) {
                  return index == 1 || $(this).attr("id") == "fourth";
                })
            .css("border", "3px double red");

תוצאת הפעלה קוד לעיל:

נסה זאת בעצמך

דוגמה 4 - קוד מלא:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.js"></script>
 
  <script type="text/javascript" language="javascript">

  $(document).ready(function(){
    
    $("div").css("background", "#b4b0da")
            .filter(function (index) {
                  return index == 1 || $(this).attr("id") == "fourth";
                })
            .css("border", "3px double red");

  });
  </script>

  <style>
  div { width:60px; height:60px; margin:5px; float:left; 
        border:3px white solid; }
  </style>

</head>
<body>
  <div id="first"></div>
  <div id="second"></div>

  <div id="third"></div>
  <div id="fourth"></div>

  <div id="fifth"></div>
  <div id="sixth"></div>

</body>
</html>

נסה זאת בעצמך

דוגמה 5

מוחק כל האלמנטים שיש להם אלמנט ילד ol.

$("div").filter(function(index) {
  return $("ol", this).length == 0;
});

האם מידע זה היה מועיל?

כן לא

filter()

filter( selector )

.filter( selector )

.filter( function(index) )

.filter( element )

.filter( jQuery object )

שימוש בפונקצית סינון

דוגמאות

דוגמה 1

דוגמה 1 - קוד מלא:

דוגמה 2

דוגמה 3

דוגמה 4

דוגמה 4 - קוד מלא:

דוגמה 5

תגובות