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

Question

我有一个这样的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 。 Tree div包含嵌套的ul li标签，每个li具有唯一的ID。

我想展示ul li标签的第一级子级。 例如，当我单击Gary ，它应该在右div ie list显示第一级的孩子（ John, Anna, Britton ）。

现在，单击任何项​​目时，我都可以在list div中获得ul li元素的ID。

如何使用jquery / javascript遍历click元素的第一级子级并将其显示在list div中？

谢谢

Answer 1

尝试使用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/

Answer 2

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

Answer 3

您能否看一下这种方法：

它使用.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>