用于元素的jQuery循环并打印它们

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>
...

您可以看到，有同一类的" ul"one_answers" li"。我需要的只是循环浏览每个" ul"和每个" li"并打印出"一个"值一个。我的代码的问题是，它收集了所有匹配项。如何按线循环和打印单独的线？

我的代码：

$('.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

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

$("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 3

您需要遵循简单操作：

$(".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 ());
})