Jquery最接近于加载HTML的内容

我试图使用query-closest将HTML文本加载到类名为

content

的最近元素上，但无法使其显示，因为我在

php

循环中显示

HTML

内容，我相信使用

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>

文件夹\u openTOM CAT

我的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>

$（文档）.ready（函数（）{
$（'.collapsable header'）。在（'click'，函数（e）上{
log（'这是click'）；
var co=$（this）.closest（“.collapsablebody”）.find（“span.content”）.html（“Hello！”）；
});
});

方法在树中向上搜索

可折叠体。但是在代码中，
可折叠正文
位于单击的
可折叠标题
下方。因此，该函数不显示任何内容
 方法在树中向上搜索
可折叠体。但是在代码中，
可折叠正文
位于单击的
可折叠标题
下方。因此，该函数不显示任何内容
 
$（文档）.ready（函数（）{
$（'.collapsable header'）。在（'click'，函数（e）上{
log（'这是click'）；
var co=$（this）.closest（.collection items”）.find（“span.content”）.html（“Hello！”）；
});
});



文件夹\u openTOM CAT


$（文档）.ready（函数（）{
$（'.collapsable header'）。在（'click'，函数（e）上{
log（'这是click'）；
var co=$（this）.closest（.collection items”）.find（“span.content”）.html（“Hello！”）；
});
});



文件夹\u openTOM CAT

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

检查以下行：-

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

方法返回所选元素的下一个同级元素

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

closest（）只查看当前元素及其父元素

希望这能澄清两者之间的概念。
您在这里犯了一个小错误：-

检查以下行：-

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

方法返回所选元素的下一个同级元素

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

closest（）只查看当前元素及其父元素

希望这能澄清两者之间的概念。
有很多方法可以做到这一点，但请记住jquery是DOM的重量级，如果使用不当，会影响性能。我会这样做

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

上面的代码将不会循环通过所有最接近它的元素，而是跳转到下一个元素，这是非常快发现
 有很多方法可以做到这一点，但请记住jquery是DOM重的，如果使用不当，会影响性能。我会这样做

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

上面的代码将不会循环通过所有最接近它的元素，而是跳转到下一个元素，这是非常快发现
 或者使用下一个css选择器-$（'~.collapsible body.content'，this.html（“Hello！”）；谢谢你的工作，我对这些元素真的很迷茫。或者使用下一个css选择器-$（“~.collapsible body.content”，this.html（“Hello！”）；谢谢你的工作，我对这些元素真的很迷茫。很好，但你的答案应该提供一个代码解决方案，这看起来更像是一个注释。
.next（）
可以使用，即
var co=$（this.next（.collection items”）.find（“span.content”）.html（“Hello！”很好，但您的答案应该提供一个代码解决方案，这看起来更像是一个注释。
.next（）
可以使用，即
var co=$（this.next（.collection items”）.find（“span.content”）.html（“Hello！”