Блог

Главная - Вопросы по программированию - Добавление класса к n-му дочернему элементу и его дочернему элементу с помощью jQuery

Добавление класса к n-му дочернему элементу и его дочернему элементу с помощью jQuery

#javascript #html #jquery #css

#javascript #HTML #jquery ( jquery ) #css — код #jquery #css

Вопрос:

У меня есть структура, подобная

 <div class="gallery-wrapper">
  <div class="gallery-item-wrapper">
    <div class="gallery-item portrait">
      <!-- content -->
    </div>
  </div>
</div>

который повторяется n раз. Я хочу присвоить класс full gallery-item-wrapper и gallery-item divs и удалить portrait . До сих пор я был в состоянии нацелиться на gallery-item-wrapper div, но не могу нацелиться на его внутреннего дочернего элемента. Я использовал

 $(".gallery-wrapper .gallery-item-wrapper:nthchild(3n 2)").addClass("full");

но это не работает для внутреннего дочернего элемента. Есть ли способ сделать это?

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

1. Чтобы быть понятным, можете ли вы показать нам HTML, который вы хотите иметь в качестве конечного результата вашего использования JavaScript? Вы хотите, чтобы the <!-- content --> оставался? Вы хотите portrait , чтобы было удалено только имя класса или сам элемент?

2. @DavidsaysreinstateMonica, как это не понятно? Я уже получил правильный ответ и тоже получил балл.

3. Потому что язык неоднозначен и может интерпретироваться по-разному. Но вам повезло, так здорово.

Ответ №1:

Прежде всего, для обращения к gallery-item s, которые являются 3n 2 дочерними элементами его родителей, необходимо использовать следующий код:

 $(".gallery-wrapper .gallery-item-wrapper .gallery-item:nth-child(3n 2)")

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

 $(".gallery-wrapper .gallery-item-wrapper:nthchild(3n 2)")

Во-вторых, вы можете в однострочной команде удалить portrait класс и добавить full класс:

 .removeClass('portrait').addClass('full');

Вот рабочий пример:

 $(document).ready(function(){

  $('#btn').click(function(){
    var children = $(".gallery-wrapper .gallery-item-wrapper .gallery-item:nth-child(3n 2)");
    children.addClass("full").removeClass('portrait');
  });
});  
 .full{
  width: 100%;
}
.portrait{
  width: 50%;
}
.full, .portrait{
  border: 1px solid gray;
  margin-bottom: 10px;
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="gallery-wrapper">
  <div class="gallery-item-wrapper">
    <div class="gallery-item portrait">
      Content 1
    </div>
    <div class="gallery-item portrait">
      Content 2
    </div>
    <div class="gallery-item portrait">
      Content 3
    </div>
    <div class="gallery-item portrait">
      Content 4
    </div>
    <div class="gallery-item portrait">
      Content 5
    </div>
    <div class="gallery-item portrait">
      Content 6
    </div>
  </div>
</div>
<button id="btn">Make the 3n 2 items Full</button>

Ответ №2:

 $(".gallery-wrapper .gallery-item-wrapper:nth-child(3n 2)").addClass("full");

Добавит его только в .gallery-item-wrapper, поэтому вам придется добавить еще одну строку

 $(".gallery-wrapper .gallery-item-wrapper:nth-child(3n 2) .gallery-item").addClass("full");

Ответ №3:

Используйте это :

 var wrapper = $(".gallery-wrapper .gallery-item-wrapper:nth-child(3n 2)");
var subWrapper = wrapper.find('.gallery-item');
wrapper.add(subWrapper).removeClass('portrait').addClass('full');