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

Question

>我有下面的片段。

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

$(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文本的数组。此方法的优点是足够动态，可以适用于任意数量的子元素。

构建数组后，您可以遍历它以处理所有值，也可以按索引选择特定实例。试试这个：

$(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 选择器简单地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>