Question

我有这样的HTML：

<ul class="container">
    <li class="sub1">
        <a>Value1</a>
    </li>
    <li class="sub1">
        <a>Value2</a>
    </li>
</ul>
<ul class="container">
    <li class="sub1">
        <a>Value3</a>
    </li>
    <li class="sub1">
        <a>Value4</a>
    </li>
</ul>
...

正如您所看到的那样，＆＃34; UL＆＃34;同一个班级＆＃34; LI＆＃34;与同一个班级。我只需要遍历每一个＆＃34; UL＆＃34;以及每一个＆＃34; LI＆＃34;并打印出元素＆＃34; A＆＃34;价值一个接一个。我的代码问题是它收集了所有匹配项。如何逐行循环和打印？

我的代码：

$('.container').each(function(i){
   $('.sub1').each(function(a){
        console.log($('a').text());
   });
});

Answer 1

如果您希望每行print / console.log每个a代码，则必须使用$(this).find('a').text()

this是迭代的当前.sub1。然后.find a并获取文字。

$(function() {
  $('.sub1').each(function(a) {
    console.log($(this).find('a').text());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="container">
  <li class="sub1">
    <a>Value1</a>
  </li>
  <li class="sub1">
    <a>Value2</a>
  </li>
</ul>
<ul class="container">
  <li class="sub1">
    <a>Value3</a>
  </li>
  <li class="sub1">
    <a>Value4</a>
  </li>
</ul>

如果你想从ul开始循环，你可以：

$(function() {
  $('.container').each(function() {
    console.log( "---- CONTAINER ----" );
    $(this).find('.sub1').each(function() {
      console.log($(this).find('a').text());
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="container">
  <li class="sub1">
    <a>Value1</a>
  </li>
  <li class="sub1">
    <a>Value2</a>
  </li>
</ul>
<ul class="container">
  <li class="sub1">
    <a>Value3</a>
  </li>
  <li class="sub1">
    <a>Value4</a>
  </li>
</ul>

Answer 2

您需要遵循简单的操作：

＆＃13;

$(".sub1 a").each(function(el) {
  console.log($(this).html());
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="container">
    <li class="sub1">
        <a>Value1</a>
    </li>
    <li class="sub1">
        <a>Value2</a>
    </li>
</ul>
<ul class="container">
    <li class="sub1">
        <a>Value3</a>
    </li>
    <li class="sub1">
        <a>Value4</a>
    </li>
</ul>

＆＃13;

Answer 3

ul.container li a这将选择a li.sub1下的所有ul.container。

$("ul.container li.sub1 a").each(function(el) {
  console.log($(this).html());
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="container">
  <li class="sub1">
    <a>Value1</a>
  </li>
  <li class="sub1">
    <a>Value2</a>
  </li>
</ul>
<ul class="container">
  <li class="sub1">
    <a>Value3</a>
  </li>
  <li class="sub1">
    <a>Value4</a>
  </li>
</ul>

Answer 4

您可以使用查询来选择值。

$(".container .sub1 a").each (function (){
  console.log ($(this).text ());
})

元素的jQuery循环并打印它们

4 个答案: