javascript - jquery链和没有jquery链之间的区别

我不知道问题的标题是否正确，因为我不知道这到底是什么。

我有这段代码：

  $actual.find('h2').addClass('event__change')
    .append('<span class="event__arrow" aria-hidden="true">&#9660;</span>')
    .append(function () {
      var self = $(this);
      var list = '<ul class="dropdown hidden">';

      $('.event').each(function (index) {
        if ($(this).find('h2')[0] != self[0]) {
          list += "<li data-index='" + index + "'>" + $(this).find('h2').text() + '</li>';
        }
      });
      return list;
    })
    .click(function () {
      if ($(this).attr("data-expanded") == true) {
        $(this).find("ul").toggleClass('hidden');
        $(this).attr("data-expanded", false);
      } else {
        $(this).find("ul").toggleClass('hidden');
        $(this).attr("data-expanded", true);
      }
    });

而且我正试图像这样使用：

  $actual.find('h2').addClass('event__change');
  $actual.append('<span class="event__arrow" aria-hidden="true">&#9660;</span>');

  $actual.append(function () {
      var self = $(this);
      var list = '<ul class="dropdown hidden">';

      $('.event').each(function (index) {
        if ($(this).find('h2')[0] != self[0]) {
          list += "<li data-index='" + index + "'>" + $(this).find('h2').text() + '</li>';
        }
      });
      return list;
    });

    $actual.click(function () {
      if ($(this).attr("data-expanded") == true) {
        $(this).find("ul").toggleClass('hidden');
        $(this).attr("data-expanded", false);
      } else {
        $(this).find("ul").toggleClass('hidden');
        $(this).attr("data-expanded", true);
      }
   });

但是，如果我尝试更改第二个代码，效果将完全消失，我想了解原因。

最佳答案

在第一个示例中，您将束缚find("h2")的结果。

在第二个中，您直接在$actual上工作。

这些是元素的不同集合。

关于javascript - jquery链和没有jquery链之间的区别，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28883672/