jQuery nextAll — Нажимает на переключатели h-элемента все p-элементы до следующего h
Используя @Override аннотация действует как гарантия времени компиляции против общей ошибки программирования. Это бросит ошибку компиляции, если у Вас будет аннотация на метод, Вы на самом деле не переопределяете метод суперкласса.
наиболее распространенный случай, где это полезно, - при изменении метода в базовом классе для имения различного списка параметров. Метод в подклассе, который раньше переопределял метод суперкласса, больше не будет делать так должный подпись измененного метода. Это может иногда вызывать странное и неожиданное поведение, особенно при контакте со сложными структурами наследования. @Override аннотация охраняет против этого.
3 ответа
Лучший способ сделать это - использовать каждый и повторять до тех пор, пока не дойдете до следующего элемента, который должен остановить итерацию. Возвращение false во время каждого останавливает итерацию. Использование фильтра позволяет проверить тип элемента в итерации и отреагировать соответствующим образом.
$(function() {
$("p").hide();
$("h3").click(function() {
$(this).nextAll().each( function() {
if ($(this).filter('h3').length) {
return false;
}
$(this).filter('p').toggle();
});
});
});
Вот интересное решение, которое не использует .each ()
$("h3").click(function() {
var idx = $("h3,p").index(this);
var nextIdx = ($("h3,p").index($(this).nextAll("h3")));
var nextPs = (nextIdx == -1) ? $("h3,p").length - idx : nextIdx - idx;
$(this).nextAll("p:lt(" + (nextPs - 1) + ")").toggle();
});
Я ищу следующие P по индексу. Не уверен, насколько это практично, но это было хорошее упражнение.
Я бы сделал это так:
$(function() {
$("p").hide();
$("h3").click(function() {
$(this).nextAll().each(function() {
if ($(this).is('h3')) {
return false;
}
$(this).toggle();
});
});
});
Возвращение false из each () завершает цепочку.
Я бы также предложил, если возможно, лучше структурировать ваши данные для обработки этого сценария. Например:
<h3 class="question">Why is there no soup for me?</h3>
<div class="answer">
<p>...</p>
<p>...</p>
<p>...</p>
</div>
, и тогда задача становится тривиальной для решения:
$(function() {
$("div.answer").hide();
$("h3.question").click(function() {
$(this).next().toggle();
});
});