Get a nested element with jQuery

user_2772127 0
Viewed 34

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>
jquery
2 Answers

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>

user_9651460

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>

user_153773550
Related