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。树div包含嵌套的ul li标记，每个li都有唯一的ID。

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

现在，当点击任何项目时，我可以在ul li div中获取list元素的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（如果有的话）。

＆＃13;

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);
  });
});

＆＃13;

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

＆＃13;

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

3 个答案: