CODEWITHSUNDEEP
jquery
Farzaneh Talebi
Farzaneh Talebi

Reputation: 915

how to find first level child of li using jquery

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

Upvotes: 1

Views: 2342

Answers (4)

Ravenous
Ravenous

Reputation: 485

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

Upvotes: 1

xlecoustillier
xlecoustillier

Reputation: 16351

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.

Upvotes: 1

vijayP
vijayP

Reputation: 11502

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>

Upvotes: 1

Tushar
Tushar

Reputation: 87203

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>

Upvotes: 2

Related Questions