jQuery:Как выбрать «отсюда до следующего H2»?
-
21-08-2019 - |
Вопрос
Я создаю очень простую страницу часто задаваемых вопросов с помощью jQuery.Вот так:
<h2>What happens when you click on this question?</h2>
<p>This answer will appear!</p>
Все это находится внутри очень специфического div, поэтому я выберу заголовок с помощью $('#faq h2')
.Просто, правда?Нажмите на H2 и используйте this.next()
чтобы появился следующий абзац.
(Предупреждение относительно этой страницы заключается в том, что ее будет поддерживать непрограммист, поэтому я не использую классы:нет никакой гарантии, что любые новые записи будут содержать правильные классы.)
Так!Проблема:
<h2>What happens when you click on the next question?</h2>
<p>That is an interesting conundrum.</p>
<p>Because the maintainer is kind of long-winded</p>
<p>and many answers will span a few paragraphs.</p>
Так как же, не добавляя div
занятия, занятия и все такое, могу ли я получить свои this.next()
процедура выбора всего между вопросом, на который был нажат щелчок, и следующим вопросом (заголовок H2)?
Решение
Интересная проблема.Прежде всего позвольте мне сказать, что я считаю, что лучшая стратегия — заключить весь ответ в div, и тогда проблема станет тривиальной для решения:
<h2>Question here</h2>
<div>
<p>Answer here</p>
</div>
</h2>Next Question</h2>
...
с:
$(function() {
$("h2").click(function() {
$(this).next().toggleClass("highlighted");
});
});
Но, как говорится, это решаемо и без этого.
$(function() {
$("h2").click(function() {
$(this).nextAll().each(function() {
if (this.tagName == 'H2') {
return false; // stop execution
}
$(this).toggleClass("highlighted");
});
});
});
Не очень элегантно, но сработает.
Примечание: Это предполагает, что вопросы являются братьями и сестрами.Если их нет, все становится гораздо сложнее.
Другие советы
Я понимаю, что это старый вопрос, но теперь в jQuery 1.4 есть следующийПока.Итак, теперь должно работать что-то вроде этого:
$('h2').click(function(){
$(this).nextUntil('h2').show();
})
не было бы разумнее использовать стиль CSS список рассылки?
<dl class="faq">
<dt>Question?</dt>
<dd>
<p>Answer</p>
<p>Answer</p>
<p>Answer</p>
</dd>
</dl>
А затем простой выбор с помощью:
$('+ dd', this);
это текущий дт выбор.
Или просто оберните каждый ответ в div, так как это имеет смысл и семантически.Однако я думаю, что список DL имеет гораздо больше смысла с семантической точки зрения.
Конечно!Просто сделайте цикл while.
$('h2').click(function() {
var next = $(this).next();
while (next.length != 0 && next[0].nodeName == 'P')
{
next.toggle();
next = next.next();
}
});
Это предполагает, что у вас есть только теги p после h2.Вы можете добавить больше исключений в цикл while, если хотите добавить что-то вроде img.
Или, если вас не волнует, что находится между тегами H2, вы можете проверить, не равно ли H2.
$('h2').click(function() {
var next = $(this).next();
while (next.length != 0 && next[0].nodeName != 'H2')
{
next.toggle();
next = next.next();
}
});
Это скроет все после щелчка по H2, пока не будет найден следующий H2 или пока вы не подниметесь на уровень выше в доме.
Возможно, это не совсем ответ на ваш вопрос, но вы могли бы обернуть каждый пункт часто задаваемых вопросов (т. е.каждую пару вопрос/ответ) в DIV
элемент.Это имело бы семантический смысл, и непрограммисту, обслуживающему страницу, просто пришлось бы скопировать полный файл. DIV
(нет необходимости в занятиях).
HTML:
<div id="faq">
<!-- start FAQ item -->
<div>
<h2>Question goes here</h2>
<p>Answer goes here.</p>
<p>And here.</p>
<ul>
<li>Really, use any HTML element you want here.</li>
<li>It will work.</li>
</ul>
</div>
<!-- end FAQ item -->
<!-- start FAQ item -->
<div>
<h2>Second question goes here</h2>
<p>Answer to question two.</p>
</div>
<!-- end FAQ item -->
</div>
JavaScript (jQuery):
$('#faq div h2').click(function() {
$(this).parent().find(':not(h2)').show();
});
На случай, если еще есть люди, которым нужен ответ на этот вопрос...Сюда также входит строка h2 в группе.
Вот пример HTML, для которого работает мое решение:
<h2> text1 </h2>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<h3>kjdf</h3>
<h2>asdk</h2>
<h3>kjdf</h3>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<h2>aqdsa</h2>
решение:
jQuery( function ( $ ) {
//defining groups for wrapping them in custom divs
$('h2').each( function () {
var grpForDiv= [];
var next = $(this).next();
grpForDiv.push(this);
while ( next.length!==0 && next!== undefined && next[0].nodeName !== 'H2')
{
grpForDiv.push(next[0]);
next = next.next();
}
jQuery(grpForDiv).wrapAll('<div class="Group1" />');
} );
} );
Обратите внимание, что выбранный ответ является хорошим, но я собираюсь сделать что-то подобное, поэтому работал над этим сверхурочно :)
Я привел это в качестве примера.
Учитывая HTML:
<h2>Question 1</h2>
<p>Answer 1</p>
<p>Answer 1</p>
<p>Answer 1</p>
<h2>Question 2</h2>
<p>Answer 2</p>
<p>Answer 2</p>
<p>Answer 2</p>
<h2>Question 3</h2>
<p>Answer 3</p>
<p>Answer 3</p>
<p>Answer 3</p>
Сделайте следующее, и вы получите ответ.я думать Сейчас это самое элегантное из всех предложенных решений, но я бы очень ценил мнение других по этому поводу.
jQuery.fn.nextUntilMatch = function(selector) {
var result = [];
for(var n=this.next();(n.length && (n.filter(selector).length == 0));n=n.next())
result.push(n[0]);
return $(result);
}
$(function() {
$('h2~p').hide();
$('h2').click(function() {
$(this).nextUntilMatch(':not(p)').toggle();
})
});
Вы также можете сделать это, не редактируя HTML.Это плагин, который я только что написал для этой конкретной цели:
(function($){
$.fn.nextUntill = function(expr){
var helpFunction = function($obj, expr){
var $siblings = $obj.nextAll();
var end = $siblings.index( $siblings.filter(expr) );
if(end===-1) return $([]);
return $siblings.slice(0, end);
}
var retObject = new Array();
this.each(function(){
$.merge(retObject, helpFunction($(this), expr));
});
return $(retObject);
}
})(jQuery);
Вы можете использовать его следующим образом:
$('h2').click(function(){
$(this).nextUntill('h2').show(); //this will show all P tags between the clicked h2 and the next h2 assuiming the p and h2 tags are siblings
});
Я не думаю, что ваша стратегия решения проблемы верна, у вас есть 6 ответов, которые частично решают вашу проблему.....
Но ваша самая большая проблема заключается в том, что вы говорите, что не можете доверять сопровождающим использовать элементы div/spans/classes и т. д.
Я думаю, вам следует упростить для них процесс и научить их использовать ваш метод или его. НЕ БУДЕТ работа.
добавьте свою собственную простую разметку и интерпретируйте ее.
[Q] What happens when you click this link?[/Q]
[A] This marvellous answer appears [/A]
(jQuery не исправит ошибку пользователя)