事件参数列表中跨度的jQuery第n个子项[重复]答案

【问题标题】：jQuery nth child of a span in a list from event parameter [duplicate]事件参数列表中跨度的jQuery第n个子项[重复]
【发布时间】：2017-08-20 08:34:47
【问题描述】：

我想获取每个跨度的 text() 值。最好的情况是使用“事件”参数的解决方案。

$(document).ready(function () {
    $('li').click(function (e) {
      console.log($("span:nth-of-type(1n)").text());
      console.log($("span:nth-of-type(2n)").text());
      console.log($("span:nth-of-type(3n)").text());
    });
});

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

如果您有任何想法，我将非常感谢您的工作 sn-p。

预期的输出是这样的：

let var1 = $("span:nth-of-type(1n)").text(); // li1 + span1
let var2 = $("span:nth-of-type(2n)").text(); // li1 + span2
let var3 = $("span:nth-of-type(3n)").text(); // li1 + span3

在 forEach-loop 解决方案中，我需要在每个循环中使用 span 的文本元素，而我没有。

【问题讨论】：

您的代码似乎可以正常工作。你有问题吗？你期望得到什么输出？
@RoryMcCrossan：不是真的，请注意第一个 console.log 输出。
那是因为它获取了每个1n span 的文本。我知道这可能不是 OP 想要的，但他们没有指定他们 do 想要什么。我没有对你投反对票，仅供参考
@RoryMcCrossan 我会假设他们有三个以上的跨度标签或可变编号。我认为他们只想分别显示每个跨度的文本
它本身并不是真正的重复，因为我不是在寻找涉及 forEach 循环的解决方案来打印控制台内的所有结果，而是将每个跨度的 text() 值分配给本地多变的。有人可以帮忙吗？

标签： javascript jquery list event-handling

【解决方案1】：

最佳案例场景将涉及利用“事件”参数的解决方案

您可以这样做，但没有必要； click 回调中的this 将是事件被挂钩的li 元素。（但如果你真的想使用 event 参数，请参阅下面的第二个 sn-p。）

所以我们可以使用$(this).find("span")（所有后代）或$(this).children("span")（只是直接子代）遍历li 中的跨度：

$(document).ready(function () {
    $('li').click(function (e) {
      $(this).children('span').each(function() {
        console.log($(this).text());
      });
    });
});

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

如果使用事件参数真的很重要，我们可以使用e.currentTarget 来获得与上面this 相同的东西：

$(document).ready(function () {
    $('li').click(function (e) {
      $(e.currentTarget).children('span').each(function() {
        console.log($(this).text());
      });
    });
});

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

【讨论】：

我觉得很有用。我做了同样的答案，在发布之前我找到了你的答案。 +1
是的，不太清楚为什么这被否决了。
我的回答也一样，它完全符合要求，但被否决了……爱这个社区
@mr.void 您刚刚复制了 OP 发布的代码。
也许问题不是使用事件参数。我确实最初没有解决这个问题，所以我现在添加了。

【解决方案2】：

https://jsfiddle.net/g998f2hv/1/

$(document).ready(function () {
    $('li').click(function (e) {
      var spans = $(this).find("span");
      console.log($(spans[0]).text());
      console.log($(spans[1]).text());
      console.log($(spans[2]).text());
    });
});

【讨论】：

是的，请多投反对票……对于所有说这不起作用或在这里返回空字符串的人来说，这是一个有效的小提琴……但是是的，请多投反对票jsfiddle.net/g998f2hv
li1 + span1li1 + span2li1 + span3 li1 + span2 li1 + span3 这不是我想要的输出，实际上与我在初始帖子中的输出相同。
好吧，我明白了，我更新了我的答案
不幸的是，那个小提琴不起作用。