jQuery each-loop 访问每个索引文本元素

Posted 2023-03-16

【中文标题】jQuery each-loop 访问每个索引文本元素

【英文标题】：jQuery each-loop access every index text element

【发布时间】：2017-08-21 17:21:10

【问题描述】：

我有下面的sn-p。

如果您运行 sn-p，您可以看到输出是正确的，但我需要将每个 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>

【问题讨论】：

你不应该使用 jQuery each 循环，因为它很慢。如果你想使用循环，你应该使用原生 javascript 循环，它大约快十倍。

谢谢，这很有趣！

【参考方案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>

【讨论】：

感谢您的工作 sn-p。不幸的是，我在现场实施中收到“未定义”。你知道为什么会这样吗？在我的方法中，我通过变通方法获得了第一个和最后一个值： fo = $(e.target).siblings('span:first').text(); foo = $(e.target).children().remove().end().text();

不幸的是，我无法在没有看到问题的情况下真正诊断问题。使用更准确的 html 输出版本更新您的问题可能是值得的。作为猜测，您可以尝试使用find() 而不是children()，因为后者依赖于span 作为li 的子级，而find() 将搜索任何级别的后代。

【参考方案2】：

如果您已经有 3 个变量，那么为什么不简单地使用 nth-child 3 次使用 eq selector

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

【讨论】：

感谢您的工作 sn-p。不幸的是，我在现场实施中收到“未定义”。你知道为什么会这样吗？在我的方法中，我通过变通方法获得了第一个和最后一个值： fo = $(e.target).siblings('span:first').text(); foo = $(e.target).children().remove().end().text();