1

I'm trying to find first level children of a li.

For example, first level children of Li with 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>

I do

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

but it alert E , G , H , F.

How can I do this in jQuery?

enter image description here

Farzaneh Talebi
  • 835
  • 4
  • 22
  • 47
  • 3
    Possible duplicate of [How to select first child with jQuery?](http://stackoverflow.com/questions/5852452/how-to-select-first-child-with-jquery) – LuckyStarr Dec 14 '15 at 09:02
  • 2
    @lucky_starss Not the answer because that reference is for one childe element one step down. He wants multiple children that are one step down. – Ravenous Dec 14 '15 at 09:08

4 Answers4

2

Use 

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

This will select all the direct children ul of the #2 and it's direct children li

$('#2 > ul > li > span').addClass('selected');
.selected {
  color: red;
  font-weight: bold;
}
<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>
Tushar
  • 85,780
  • 21
  • 159
  • 179
1

Try:

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

> is the child selector, allowing you to select only between the direct children of the current element.

xlecoustillier
  • 16,183
  • 14
  • 60
  • 85
1

Please have a look at below code snippet:

$('.treeView').find('#2 > ul > li > span').each(function () {
    alert($(this).text());
});
<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>
vijayP
  • 11,432
  • 5
  • 25
  • 40
1

If you want one level down and all the children on that level use .children() you were so close... https://api.jquery.com/children/ .children() is meant to replace .find() in this instance.

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

Ravenous
  • 485
  • 4
  • 14