CODEWITHSUNDEEP
jquery
Duddy67
Duddy67

Reputation: 1066

Get a nested element with jQuery

I want to get the ul element which is nested in some spans just after the select element.
How can I do this with jQuery ?

<select id="my-select" class="my-select">
  <option value="1">One value</option>
  ...
</select>

<span class="first-span">
  <span class="second-span">
    <span class="third-span">
      <ul class="my-list"> 
        <li class="">First li</li>
        ...
      </ul>
    </span>
  </span>
</span>

Upvotes: 1

Views: 41

Answers (2)

4b0
4b0

Reputation: 22323

Alternative, if you have unable to use class, use next() and find().

Example:

let result = $('#my-select').next('span').find('ul li').text();
console.log(result);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="my-select" class="my-select">
  <option value="1">One value</option>

</select>

<span class="first-span">
  <span class="second-span">
    <span class="third-span">
      <ul class="my-list"> 
        <li class="">First li</li>

      </ul>
    </span>
  </span>
</span>

Upvotes: 1

biberman
biberman

Reputation: 5777

You could select it in many ways, for example by class:

$('.my-list')

or if you want to be more precise for example:

$('span.third-span > ul.my-list')

Working example:

console.log($('span.third-span > ul.my-list').children().length);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id="my-select" class="my-select">
  <option value="1">One value</option>
  ...
</select>

<span class="first-span">
  <span class="second-span">
    <span class="third-span">
      <ul class="my-list"> 
        <li class="">First li</li>
        ...
      </ul>
    </span>
  </span>
</span>

Upvotes: 0

Related Questions