Question

我正在尝试找到li的第一级孩子。

例如，Li的第一级孩子id='2' = E，F。

<ul class="treeView">
    <li id="1">
        <span>A</span>
        <ul>
            <li id="2"><span>B</span>
                <ul>
                    <li id="5"><span>E</span>
                        <ul>
                            <li id="7"><span>G</span></li>
                            <li id="8"><span>H</span></li>
                        </ul>
                    </li>
                    <li id="6"><span>F</span></li>
                </ul>
            </li>
            <li id="3"><span>C</span></li>
            <li id="4"><span>D</span></li>
        </ul>
    </li>
</ul>

我做

$('.treeView').find('#2 ul li span').each(function () {
    alert($(this).text());
});

但警告E , G , H , F。

我如何在jQuery中执行此操作？

Answer 1

使用

$('#2 > ul > li > span')

这将选择ul及其直接子女#2的所有直接子女li

＆＃13;

$('#2 > ul > li > span').addClass('selected');

＆＃13;

.selected {
  color: red;
  font-weight: bold;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="treeView">
  <li id="1">
    <span>A</span>
    <ul>
      <li id="2"><span>B</span>
        <ul>
          <li id="5"><span>E</span>
            <ul>
              <li id="7"><span>G</span>
              </li>
              <li id="8"><span>H</span>
              </li>
            </ul>
          </li>
          <li id="6"><span>F</span>
          </li>
        </ul>
      </li>
      <li id="3"><span>C</span>
      </li>
      <li id="4"><span>D</span>
      </li>
    </ul>
  </li>
</ul>

＆＃13;

Answer 2

请查看以下代码段：

＆＃13;

$('.treeView').find('#2 > ul > li > span').each(function () {
    alert($(this).text());
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul class="treeView">
    <li id="1">
        <span>A</span>
        <ul>
            <li id="2"><span>B</span>
                <ul>
                    <li id="5"><span>E</span>
                        <ul>
                            <li id="7"><span>G</span></li>
                            <li id="8"><span>H</span></li>
                        </ul>
                    </li>
                    <li id="6"><span>F</span></li>
                </ul>
            </li>
            <li id="3"><span>C</span></li>
            <li id="4"><span>D</span></li>
        </ul>
    </li>
</ul>

＆＃13;

Answer 3

如果您希望关闭一个级别，并且该级别的所有孩子都使用.children()，那么您就是如此...... https://api.jquery.com/children/ .children()旨在替换此例中的.find()。

$('#2>ul').children().each(function () { alert($(this).text()); });

Answer 4

尝试：

$('.treeView').find('#2>ul>li>span').each(function () {
    alert($(this).text());
});

>是child selector，允许您仅在当前元素的直接子元素之间进行选择。

如何使用jquery找到li的第一级子

4 个答案: