:nth-child(index/even/odd/equation)

סלקטור nth-child

תיאור: תואם לכל האלמנטים, שהם ילידים N-ים של ההורים.

jQuery(':nth-child(index/even/odd/equation)')

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

index

אינדקס של כל אלמנט הילד מתחיל מ-1, זוגי, אי זוגי או המשוואה ( לדוגמה: :nth-child(even), :nth-child(4n) )

מאחר ויישום jQuery של :nth-child(n) נגזר אך ורק מן המפרט של CSS, ערך n מתחיל מ- 1. עבור כל ביטוי בחירה אחרים, לעומת זאת, jQuery עוקב אחרי חישוב של JavaScript, החל מ-0. לכן, נתון היחיד <ul> מכיל שני אלמנטים <li>, ש $('li:nth-child(1)') בוחר ראשון <li>, בזמן ש- $('li:eq(1)') בוחר שני.

פסאודו מחלקה :nth-child(n) קל לבלבל עם :eq(n), לעומת ששניהם יכולים לקבל אלמנטים בהתאמה שונים מאוד. עם :nth-child(n), כל הילדים נספרים, ללא קשר מה הם, ואלמנט נבחר רק אם הוא מתאים לסלקטור המצורף לפסאודו מחלקה. עם :eq(n) רק סלקטור, המצורף לפסאודו מחלקה נספר, לא רק עבור הילדים של כל אלמנט אחר, ואלמנט (N +1) ש (N מתחיל מ- 0) נבחר.

המשך הדיון על שימוש הלא רגיל הזה ניתן למצוא ב- מפרט W3C CSS.

דוגמאות

דוגמה 1

מחפש אלמנט li השני בכל ul שצוין ומסמן אותו.

$("ul li:nth-child(2)").append(" - 2nd!");

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

נסה זאת בעצמך

קוד מלא:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-1.5.js" type="text/javascript"></script>
  
  <script>

  $(document).ready(function(){
    $("ul li:nth-child(2)").append("<span> - 2nd!</span>");
  });
  </script>
  <style>
  div { float:left; }
  span { color:blue; }
  </style>

</head>
<body>
  <div><ul>
    <li>John</li>
    <li>Karl</li>

    <li>Brandon</li>
  </ul></div>
  <div><ul>
    <li>Sam</li>

  </ul></div>
  <div><ul>
    <li>Glen</li>
    <li>Tane</li>

    <li>Ralph</li>
    <li>David</li>
  </ul></div>
</body>
</html>

נסה זאת בעצמך

דוגמה 2

זהו מגרש המשחקים לראות איך סלקטור עובד עם שורות שונות. שימו לב שהוא שונה מ- :even ו- :odd, שלא שומרים על קשר עם ההורים ופשוט מסננים רשימת האלמנטים אל כל אחד אחר. :nth-child, לעומת זאת, סופר אינדקס של ילד עבור ההורים שלו. בכל מקרה, קל יותר לראות מאשר להסביר, לכן...

$("button").LINK_706|click%(function () {
      var str = $(this).text();
      $("tr").css("background", "white");
      $("tr" + str).css("background", "#ff0000");
      $("#inner").text(str);
    });

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

נסה זאת בעצמך

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

<!DOCTYPE html>
<html>
<head>
  <style>
  button { display:block; font-size:12px; width:100px; }
  div { float:left; margin:10px; font-size:10px; border:1px solid black; }
  span { color:blue; font-size:18px; }
  #inner { color:red; }
  td { width:50px; text-align:center; }
  </style>
<script src="http://code.jquery.com/jquery-latest.js"></script>  
  <script type="text/javascript" language="javascript">
     $(document).ready(function(){
    $("button").click(function () {
      var str = $(this).text();
      $("tr").css("background", "white");
      $("tr" + str).css("background", "#ff0000");
      $("#inner").text(str);
    });
     });
  </script>
</head>
<body>
  <div>
    <button>:nth-child(even)</button>
    <button>:nth-child(odd)</button>
    <button>:nth-child(3n)</button>
    <button>:nth-child(2)</button>
  </div>
  <div>
    <button>:nth-child(3n+1)</button>
    <button>:nth-child(3n+2)</button>
    <button>:even</button>
    <button>:odd</button>
  </div>
  <div><table>
    <tr><td>John</td></tr>
    <tr><td>Karl</td></tr>
    <tr><td>Brandon</td></tr>
    <tr><td>Benjamin</td></tr>
  </table></div>
  <div><table>
    <tr><td>Sam</td></tr>
  </table></div>
  <div><table>
    <tr><td>Glen</td></tr>
    <tr><td>Tane</td></tr>
    <tr><td>Ralph</td></tr>
    <tr><td>David</td></tr>
    <tr><td>Mike</td></tr>
    <tr><td>Dan</td></tr>
  </table></div>
  <span>
    tr<span id="inner"></span>
  </span>
</body>
</html>

נסה זאת בעצמך

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

כן לא

:nth-child(index/even/odd/equation)

סלקטור nth-child

jQuery(':nth-child(index/even/odd/equation)')

דוגמאות

דוגמה 1

דוגמה 2

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

תגובות