ドキュメント

Selectors/nthChild

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Selectors

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

Matches all elements that are the nth-child of their parent or that are the parent's even or odd children.
While :eq(index) matches only a single element, this matches more than one: One for each parent with index. Multiple for each parent with even, odd, or equation. The specified index is one-indexed, in contrast to :eq() which starts at zero.
Arguments:
indexNumber/String
The index of each child to match, starting with 1 or the string even, odd, or equation ( eg. :nth-child(even), :nth-child(4n) )
Examples:

Finds the second li in each matched ul and notes it.

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

<!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-latest.js"></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>

This is a playground to see how the selector works with different strings. Notice that this is different from the :even and :odd which have no regard for parent and just filter the list of elements to every other one. The :nth-child, however, counts the index of the child to its particular parent. In any case, it's easier to see than explain so...

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

<!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-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    
    $("button").click(function () {
      var str = $(this).text();
      $("tr").css("background", "white");
      $("tr" + str).css("background", "#ff0000");
      $("#inner").text(str);
    });

  });
  </script>
  <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>
</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>

NameType