jQuery - 直系子级

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

要了解我的问题，您可以在 https://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);
});