j从事件参数查询列表中跨度的第n个子项

Question

我想获取每个范围的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>

如果您有任何想法，我将非常感谢工作片段。

预期输出如下所示：

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 的文本元素，而我没有。

Answer 1

最好的情况是使用"事件"参数

的解决方案

你可以这样做，但没有必要; click回调中的this将是挂接事件li元素。(但是，如果您确实想使用 event 参数，请参阅下面的第二个代码段。

因此，我们可以循环遍历li内的跨度，可以使用$(this).find("span")(所有后代(或$(this).children("span")(仅直接子级(：

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

如果使用 event 参数真的很重要，我们可以使用 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>

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