Question

我正在尝试使用最近的查询在类名为content的最近元素上加载HTML文本，但无法显示它，因为我在html内显示php内容{1}}循环我相信使用closest()函数是执行此操作的最佳方法。但看起来我错过了什么。

我的HTML

<ul  class="collapsible" data-collapsible="accordion">
    <li class="collection-items">
      <a class="collapsible-header" style="color:black;"><i class="material-icons">folder_open</i>TOM CAT</a>
      <div class="collapsible-body">

      <span class="content">
              <!--This is where the hello should be-->
        </span>

        </div>
    </li>

  </ul>

我的jquery

<script>

$(document).ready(function () {



     $('.collapsible-header').on('click', function(e) {

          console.log('this is click');

            var co = $(this).closest(".collapsible-body").find("span.content").html("Hello!");


      });



});

</script>

Answer 1

＆＃13;

$(document).ready(function() {
  $('.collapsible-header').on('click', function(e) {
    console.log('this is click');
    var co = $(this).closest(".collection-items").find("span.content").html("Hello!");
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="collapsible" data-collapsible="accordion">
  <li class="collection-items">
    <a class="collapsible-header" style="color:black;"><i class="material-icons">folder_open</i>TOM CAT</a>
    <div class="collapsible-body">
      <span class="content">
              <!--This is where the hello should be-->
      </span>
    </div>
  </li>

</ul>

＆＃13;

Answer 2

closest()方法在树中搜索以查找.collapsible-body。但在代码中，.collapsible-body低于点击的.collapsible-header。因此该功能什么都不显示。

Answer 3

你在这里犯了一个小错误： -

检查以下行： -

1) $(this).next(".collapsible-body").find("span.content").html("Hello!");

next（）方法返回所选元素的下一个兄弟元素。

2) $(this).closest(".collection-items").find("span.content").html("Hello!");

nearest（）仅查看当前元素及其父元素

希望这能清除你们两者之间的概念。

Answer 4

有很多方法可以做到这一点，但请记住，jquery是DOM很重，如果不明智地使用它会影响性能。我会这样做，

$(function() {
  $('.collapsible-header').on('click', function(e) {
    $(this).next().find("span.content").html("Hello!");
  });
});

上面的代码不会循环遍历最接近它的所有元素，而是跳转到下一个很快发现的元素！

Jquery最接近加载HTML的内容

4 个答案: