Блог

Главная - Вопросы по программированию - Получите вложенный элемент с помощью jQuery

Получите вложенный элемент с помощью jQuery

#jquery

Вопрос:

Я хочу получить элемент ul, который вложен в некоторые промежутки сразу после элемента select.
Как я могу сделать это с помощью 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>

Ответ №1:

Альтернатива, если вы не можете использовать класс, используйте next() и find() .

Пример:

 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>

Ответ №2:

Вы можете выбрать его многими способами, например, по классу:

 $('.my-list')

или, если вы хотите быть более точным, например:

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

Рабочий пример:

 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>
Метки: