Блог

Главная - Вопросы по программированию - Как выбрать n-й дочерний элемент идентификатора с помощью jquery

Как выбрать n-й дочерний элемент идентификатора с помощью jquery

#javascript #html #jquery #css

#javascript #HTML #jquery #css

Вопрос:

Я пытаюсь выбрать n-го дочернего элемента div с идентификатором с помощью jquery. Это моя разметка:

 <div id="burger-wrapper" onclick="menu()">
      <span></span>
      <span></span>
      <span></span>
</div>

И это jquery-selector:

 let firstBurgerSpan = $("#burger-wrapper span:nth-child(1)");

Но выбранный диапазон «не определен». Я что-то упускаю или это неправильный способ выбора этих промежутков?

Редактировать:

Это результат, который я получаю, когда сначала регистрирую селектор в консоли, а затем пытаюсь изменить стиль

Комментарии:

1. Выполняется ли ваш jQuery после загрузки HTML?

2. Ваш код в порядке, просто не в том месте.

3. span:nth-of-type Не было бы лучше? span:nth-child начнется сбой, как только дочерние элементы будут иметь разные имена тегов.

4. Ну, покажите код, который на самом деле выдает ошибку. Скорее всего, это неправильная обработка / доступ к jquery / без запроса . transform является свойством style , если не используется в SVGElements.

5. Вы, вероятно, пытаетесь $("#burger-wrapper span:nth-child(1)").style.transform; . Объекты jQuery не предоставляют свойства, style которое делает это undefined и приводит к неперехваченной ошибке типа: невозможно прочитать свойство ‘transform’ неопределенного . Либо используйте $("#burger-wrapper span:nth-child(1)").get(0).style.transform; , либо эквивалент jQuery.

Ответ №1:

Чтобы получить фактический диапазон, вы должны принять ( get ) его следующим образом: firstBurgerSpan.get(0) . Вот скрипка

Комментарии:

1. Ваше утверждение ответа по-прежнему неверно. Просто К вашему сведению. Он не возвращает array обратно (ну, технически да), он выдает именно ваш элемент, который вы искали. это первый диапазон, и вы можете использовать функции jQuery, чтобы делать все, что вы хотите, из этого элемента. нет необходимости использовать [0]

2. @AlwaysHelping тогда скрипка должна быть неправильной. Код, написанный на основе jQuery 3.4.1.

3. firstBurgerSpan[0] предоставляет DOM-элемент и равен jquery firstBurgerSpan.get(0) . Следовательно, то, что регистрирует ваша скрипка, является DOM-элементом, а не объектом, обернутым в jquery. Так что да, чтобы действительно получить span пример правильный, просто часть массива вводит в заблуждение.

4. Я не знаю, как это помечено как правильное. Переменной просто нужно использовать > метод селектора. Переменная не определена, поэтому даже не пытайтесь получить доступ к методу.

5. @destroyer22719 это неверно. Использовать > для предотвращения большей потенциальной глубины, зависит от OP, его структуры и его требований.

Ответ №2:

Просто чтобы добавить, решение jQuery на самом деле было бы:

 $("#burger-wrapper span:nth-child(1)").css('transform', '...');
  

 $("#burger-wrapper span:nth-child(1)").css('color', 'red');  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="burger-wrapper">
      <span>1</span>
      <span>2</span>
      <span>3</span>
</div>

Не путайте jQuery и не-jQuery без необходимости. В противном случае вы можете с таким же успехом пропустить jQuery все вместе, чтобы достичь этого:

 document.querySelector("#burger-wrapper > span:nth-child(1)").style.transform = '...';
  

 document.querySelector("#burger-wrapper span:nth-child(1)").style.color = 'blue';  
 <div id="burger-wrapper">
      <span>1</span>
      <span>2</span>
      <span>3</span>
</div>

Вы, вероятно, пытаетесь $("#burger-wrapper span:nth-child(1)").style.transform; . Объекты jQuery не предоставляют свойства, style которое делает это undefined и приводит к неперехваченной ошибке типа: невозможно прочитать свойство ‘transform’ неопределенного. Либо используйте $("#burger-wrapper span:nth-child(1)").get(0).style.transform; , либо эквивалент jQuery.

Комментарии:

1. это не css, и он все равно вернет undefined. Вам нужно использовать #id > tagname для выбора дочернего элемента.

2. @destroyer22719: Для меня все выглядит правильно. Добавлены рабочие фрагменты, чтобы показать, что это работает.

3. @destroyer22719: > в данном случае это не имеет значения и зависит от выбора InsertIntoHTL.

Ответ №3:

  let firstBurgerSpan = $("#burger-wrapper span:nth-child(1)");

это неверно, и я не вижу, чтобы кто-нибудь еще упоминал тот факт, что у вас простая проблема с селектором. Вам нужно использовать .find() метод или метод дочернего селектора > 

 let firstBurgerSpan = $("#burger-wrapper > span:nth-child(1)");

или

 let firstBurgerSpan = $("#burger-wrapper").find ("span:nth-child(1)");

Комментарии:

1. $("#burger-wrapper").find("span:nth-child(1)") то же самое, что $("#burger-wrapper span:nth-child(1)") . $("#burger-wrapper").children("span:nth-child(1)") было бы так же, как $("#burger-wrapper > span:nth-child(1)") . В этом конкретном случае все работает нормально.