jQuery - 直系子级

标签 jquery list parent-child

我有这样的结构:

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

请为我指明正确的方向。

最佳答案

我认为您的选择器工作得很好 - 问题在于您使用它所做的事情。

当您调用.text()时,您将获得该元素的所有内容。所有这些,包括子元素。

试试这个:

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

关于jQuery - 直系子级,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3166049/

相关文章:

javascript - jQuery Draggable 放置后不可拖动

java - 将两个列表中的数据连接到一个对象中

jquery - 如何使用 jquery-collagePlus 随机播放拼贴图像?

python - 按 1 列和 1 行打印列表元素,然后 1 列和 2 行等等,直到列表末尾

python - 打印循环出队的非空部分

objective-c - 从父类(super class)的方法实现返回

mysql - 使用可变数量的其他字段更新 mySQL 字段

sql - 具有递归 CTE : sorting/ordering children by popularity while retaining tree structure (parents always above children) 的 Postgres

javascript - 扩大下拉菜单的宽度

php - WordPress "admin-ajax.php"404 错误