#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');