Question

我有以下代码段。

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

一旦构建了数组，您可以循环遍历它以使用所有值，或者通过索引选择特定实例。试试这个：

＆＃13;

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

＆＃13;

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

＆＃13;

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每个循环访问每个索引文本元素

2 个答案: