顯示嵌套UL裏的第一級子使用jQuery

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都有唯一的標識。

我想顯示一個ul li標記的第一級子女。例如，當我點擊Gary時，它應該在右邊的div i.e. list中顯示一級子女（John, Anna, Britton）。

現在我可以在list div中獲得ul li元素的ID，點擊任何項目。

如何使用jquery/javascript遍歷點擊元素的一級子元素並在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中的文本，而不是從它的childerns中獲取文本（如果有的話）。

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>