jQuery 每个循环访问每个索引文本元素

Question

我有以下代码片段。

如果您运行代码片段，您可以看到输出是正确的，但我需要将每个 span 的文本元素存储在一个变量中以便进一步处理。如果可能的话，我更喜欢没有递归函数的解决方案。

$(document).ready(function () {
    $('li').click(function (e) {
     
      let fo; let foo; let fooo;
      $(e.currentTarget).children('span').each(function() {
        console.log($(this).text());
        // Expected Output
        // fo = li1(2)   +span1
        // foo = li1(2)  +span2
        // fooo = li1(2) +span3
      });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <ul>
    <li>
      <span style="display: block;">li1 + span1</span>
      <span style="display: block;">li1 + span2</span>
      <span style="display: block;">li1 + span3</span>
    </li>
    <li>
      <span style="display: block;">li2 + span1</span>
      <span style="display: block;">li2 + span2</span>
      <span style="display: block;">li3 + span3</span>
    </li>
  </ul>
</div>

Answer 1

要实现您的要求，您可以使用 map() 构建所有 span 文本的数组。此方法的优点是足够动态以适用于任意数量的子元素。

构建数组后，您可以循环遍历它以处理所有值，或者 select 通过其索引的特定实例。试试这个：

$(document).ready(function() {
  $('li').click(function(e) {
    var textValues = $(this).children('span').map(function() {
      return $(this).text();
    }).get();
    
    console.log(textValues[1]); // the second item
    console.log(textValues); // all
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <ul>
    <li>
      <span style="display: block;">li1 + span1</span>
      <span style="display: block;">li1 + span2</span>
      <span style="display: block;">li1 + span3</span>
    </li>
    <li>
      <span style="display: block;">li2 + span1</span>
      <span style="display: block;">li2 + span2</span>
      <span style="display: block;">li3 + span3</span>
    </li>
  </ul>
</div>

Answer 2

如果你已经有 3 个变量，那么为什么不使用 eq selector

简单地取 nth-child 3 次

$(document).ready(function () {
    $('li').click(function (e) {
     
      let fo = $(this).find("span:eq(0)").html(); 
      let foo = $(this).find("span:eq(1)").html();
      let fooo = $(this).find("span:eq(2)").html();
      console.log(fo, foo, fooo);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <ul>
    <li>
      <span style="display: block;">li1 + span1</span>
      <span style="display: block;">li1 + span2</span>
      <span style="display: block;">li1 + span3</span>
    </li>
    <li>
      <span style="display: block;">li2 + span1</span>
      <span style="display: block;">li2 + span2</span>
      <span style="display: block;">li3 + span3</span>
    </li>
  </ul>
</div>

jQuery 每个循环访问每个索引文本元素

jQuery each-loop access every index text element

javascript

each

jquery

list