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