Question

我有这样的结构：

<ul id="mycustomid">
    <li><a>Item A</a>
        <ul class="children">
           <li><a>Child1 of A</a>
               <ul class="children">
                 <li><a>Grandchild of A</a>
                    <ul class="children">
                       <li><a>Grand Grand child of A</a></li>
                    </ul>
                </li>
               </ul>
           </li>
        </ul>
    </li>
    <li><a>Item B</a></li>
    <li><a>Item C</a></li>
</ul>

现在，我正在使用Jquery只获取ul＃mycustomid的直接子节点。但是我的代码在我的结构中返回了所有li。我该怎么办？

这是我的代码：

$(document).ready(function() {
 var arri = $("#mycustomid>li").text();
 alert(arri);
});

我也试过.children（），它给了我几乎相同的结果。这真让我紧张:(

我的警报框输出完全如下所示（包括那些白色间隙）：

Item A 
Child1 of A
Grandchild of A

Grand Grandchild of A


ItemBItemC

然而，它应该只是（没有空格）：

Item A 
Item B
Item C

要了解我的问题，您可以在http://jsfiddle.net/yS6ZJ/

查看实时版本

请指出我正确的方向，

由于

Answer 1

我认为你的选择器工作正常 - 这就是你正在做的事情，这是有问题的。

当您致电.text()时，您会获得所有元素的内容。所有这些，包括子元素。

试试这个：

$('#mycustomid > li').each(function() {
  alert($(this).find('a:eq(0)').text());
});

Answer 2

这将解决您的问题：

$(document).ready(function() {
  var arri=$("#mycustomid > li").children('a').append('\n').text();
  alert(arri);
});

append('\n')只是为了添加换行符，以便在警报中看起来没问题。

要包括所有孙子女，您只需删除对LI的直接引用：

$(document).ready(function() {
  var arri=$("#mycustomid li").children('a').append('\n').text();
  alert(arri);
});

只是让孙子们：

$(document).ready(function() {
  var arri=$("#mycustomid li").not("#mycustomid > li").children('a').append('\n').text();
  alert(arri);
});

要获得每个级别，您可以选择：

$(document).ready(function() {
  var ChildOfA=$("#mycustomid > li > ul > li > a").append('\n').text();
  var GrandchildOfA=$("#mycustomid > li > ul > li > ul > li > a").append('\n').text();
  var GrandGrandChildOfA=$("#mycustomid > li > ul > li > ul > li > ul > li > a").append('\n').text();
  alert('List of Child1 of A children:\n\n'+ChildOfA+'\n\n'+
        'List of Grandchild of A children:\n\n'+GrandchildOfA+'\n\n'+
        'List of Grand Grand child of A children:\n\n'+GrandGrandChildOfA);
});

Jquery - 直系孩子

2 个答案: