使用jquery显示嵌套ul-li的一级子级

Show first level children of a nested ul li using jquery

本文关键字：一级 jquery 显示 嵌套 ul-li 使用      更新时间：2023-09-26

我有一个HTML文件，如下所示：

JS:

 function functionName(event) {
  event.stopPropagation();
  var item = event.data.param;
  document.getElementById("list").innerHTML = item;
 }
 $(document).ready(function() {
   $("li").each(function() {
    $(this).on('click', {param: this.id}, functionName);
 });
});

HTML:

<div id="main">
<div id="tree">
<ul class="xyz">
  <li class="hide">AVC</li>
  <li class="hide">Anna</li>
  <li class="hide">Peter</li>
  <li id="foo1">Gary
  <ul class="xyz">
    <li class="hide">John</li>
    <li class="hide">Anna</li>
    <li id="foo2">Briton
    <ul class="xyz">
       <li class="hide">gg</li>
       <li class="hide">hh</li>
       <li id="foo3">Layla
       <ul class="xyz">
          <li class="hide">gg</li>
          <li class="hide">hh</li>
          <li id="foo4">Undertaker
          <ul class="xyz">
            <li class="hide">gg</li>
            <li class="hide">hh</li>
          </ul>
          </li>
       </ul>
       </li>
     </ul>
     </li>
    </ul>
    </li>
  </ul>
  </div>
   <div id="list"></div>
   </div>

我有两个div标签，它们的id分别是tree和list。树div包含嵌套的ul li标签，每个li都有唯一的id。

我想显示ul li标记的第一级子级。例如，当我单击Gary时，它应该在右侧的div i.e. list中显示第一级子级（John, Anna, Britton）。

现在，我可以在单击任何项目时获得listdiv中ul li元素的id。

如何使用jquery/javascript遍历clicking元素的一级子元素并将其显示在listdiv中？

感谢

尝试使用find()，> ul选择直接后代

$('li[id^="foo"]').click(function(e){
e.stopPropagation();
var x = $(this).last().find(' > ul').clone().find('ul').remove().end();
console.log(x[0])
 $('#list').html(x);
 $('#list .hide').show();
});

简单演示：https://jsfiddle.net/sk30mwud/4/

'$('#tree').on('click', 'li', function(){
     $(this).find('> ul > li').toggleClass('hide');
     return false;
})'

你能看看这种方法吗：

它使用.contents().get(0).nodeValue来获取子li节点中存在的文本，而不是从其子节点（如果有的话）中获取文本。

function functionName(event) {
  event.stopPropagation();
  var item = event.data.param;
  var names = [];
  $("#" + item).children("ul").children("li").each(function() {
    names.push($(this).contents().get(0).nodeValue);
  });
  $("#list").text(names.join(","));;
}
$(document).ready(function() {
  $("li").each(function() {
    $(this).on('click', {
      param: this.id
    }, functionName);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="main">
  <div id="tree">
    <ul class="xyz">
      <li class="hide">AVC</li>
      <li class="hide">Anna</li>
      <li class="hide">Peter</li>
      <li id="foo1">Gary
        <ul class="xyz">
          <li class="hide">John</li>
          <li class="hide">Anna</li>
          <li id="foo2">Briton
            <ul class="xyz">
              <li class="hide">gg</li>
              <li class="hide">hh</li>
              <li id="foo3">Layla
                <ul class="xyz">
                  <li class="hide">gg</li>
                  <li class="hide">hh</li>
                  <li id="foo4">Undertaker
                    <ul class="xyz">
                      <li class="hide">gg</li>
                      <li class="hide">hh</li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
  <div id="list"></div>
</div>

相关文章：