Question

我有这个简单的HTML页面：

<html>

   <head>
   <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

   <script>
   $(document).ready(function () {
        $('ul li:eq(1)').each(function(){
           alert($(this).text());
        });
   });
   </script>

   </head>

   <body>
      <ul>
         <li>Test</li>
         <li>Pop</li>
         <li>Test</li>
      </ul>

      <ul>
         <li>Test</li>
         <li>Pop</li>
         <li>Test</li>
      </ul>

      <ul>
         <li>Test</li>
         <li>Pop</li>
         <li>Test</li>
      </ul> 
   </body>

</html>

我想遍历所有的UI并提醒每个列表中第二个li的文本值。因此，上面的代码应该提醒单词pop 3次。但是，它只发出一次警报。

如何在上述情况下正确使用eq？

Answer 1

您需要使用:nth-child。 :eq()选择器将返回传递索引处的元素，在本例中为1，传递给传递给它的所有元素

$(document).ready(function() {
  $('ul li:nth-child(2)').css('color', 'red');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li>Test</li>
  <li>Pop</li>
  <li>Test</li>
</ul>

<ul>
  <li>Test</li>
  <li>Pop</li>
  <li>Test</li>
</ul>

<ul>
  <li>Test</li>
  <li>Pop</li>
  <li>Test</li>
</ul>

如果您想使用:eq()，则需要将过滤器作为二级过滤器传递，如

$('ul').find('li:eq(1)').css('color', 'red')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li>Test</li>
  <li>Pop</li>
  <li>Test</li>
</ul>

<ul>
  <li>Test</li>
  <li>Pop</li>
  <li>Test</li>
</ul>

<ul>
  <li>Test</li>
  <li>Pop</li>
  <li>Test</li>
</ul>

在这种情况下，首先它将找到所有3个ul元素，然后将遍历每个元素并在每个元素中相互独立地调用.find('li:eq(1)')。

JQUERY使用等效的和每个在一起

1 个答案: