jQuery: come selezionare “da qui fino al prossimo H2”?

Question

Sono la creazione di una pagina di FAQ molto semplice con jQuery. In questo modo:

<h2>What happens when you click on this question?</h2>
<p>This answer will appear!</p>

Questo è tutto all'interno di un div molto specifico, quindi mi selezionerà l'intestazione con $('#faq h2'). Semplice, no? Cliccare sulla H2 e utilizzare this.next() per rendere il paragrafo successivo vedere.

(L'avvertenza con questa pagina è che un non-programmatore sarà suo mantenimento, che è il motivo per cui non sto usando le classi:. Non c'è alcuna garanzia che eventuali nuove voci avrebbero le classi giuste loro)

! Il problema:

<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>

Così come, senza l'aggiunta di div s e classi e quant'altro, posso avere il mio <=> selezionare tutto di routine tra la questione-che-era-clic-on e la domanda successiva (intestazione H2)?

Answer 1

Interessante problema. Prima di tutto lasciatemi dire che penso che la strategia migliore è quella di racchiudere l'intera risposta in un div e allora il problema diventa banale da risolvere:

<h2>Question here</h2>
<div>
<p>Answer here</p>
</div>
</h2>Next Question</h2>
...

con:

$(function() {
  $("h2").click(function() {
    $(this).next().toggleClass("highlighted");
  });
});

Ma ciò detto, è risolvibile senza quella.

$(function() {
  $("h2").click(function() {
    $(this).nextAll().each(function() {
      if (this.tagName == 'H2') {
        return false; // stop execution
      }
      $(this).toggleClass("highlighted");
    });
  });
});

Non estremamente elegante, ma che funzionerà.

Nota: Questo presuppone le domande sono fratelli. Se non sono diventa molto più complicato.

Answer 2

Mi rendo conto che questa è una vecchia questione, ma jQuery 1.4 ora ha nextUntil . Quindi, qualcosa come questo dovrebbe funzionare:

$('h2').click(function(){
    $(this).nextUntil('h2').show();
})

Answer 3

Non avrebbe più senso usare un css stile DL

<dl class="faq">
    <dt>Question?</dt>
    <dd>
         <p>Answer</p>
         <p>Answer</p>
         <p>Answer</p>
    </dd>
</dl>

E poi una facile selezione utilizzando:

$('+ dd', this); 

essendo questa la corrente dt selezione.

O semplicemente avvolgere ogni risposta in un div, dal momento che ha senso semanticamente troppo. Tuttavia penso che una lista DL rende molto più senso semanticamente.

Answer 4

Certo! Basta fare un ciclo while.

$('h2').click(function() {
    var next = $(this).next();
    while (next.length != 0 && next[0].nodeName == 'P')
    {
        next.toggle();
        next = next.next();
    }
});

Questo presuppone che solo i tag p dopo la vostra h2. È possibile aggiungere ulteriori eccezioni alla ciclo while se si desidera aggiungere qualcosa di simile img.

Oppure, se non si cura ciò che è tra i tag H2 è possibile controllare per non uguale a H2.

$('h2').click(function() {
    var next = $(this).next();
    while (next.length != 0 && next[0].nodeName != 'H2')
    {
        next.toggle();
        next = next.next();
    }
});

In questo modo nascondere tutto dopo l'H2 che viene cliccato su fino a quando il prossimo H2 viene trovato o salire di un livello nel DOM.

Answer 5

Forse questo non è realmente rispondere alla tua domanda, ma si potrebbe avvolgere ogni elemento FAQ (vale a dire ogni domanda / risposta coppia) in un elemento DIV. Questo avrebbe senso semanticamente, e il non-programmatore di mantenere la pagina sarebbe semplicemente copiare una <=> completo (non è necessario per le classi).

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();
});

Answer 6

Nel caso in cui ci sono ancora persone che hanno bisogno di una risposta per questo ... Questo include anche la linea h2 nel gruppo.

Qui, se il campione html per il quale lavora la mia soluzione:

<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>

---

soluzione:

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" />');

    } );
} );

Answer 7

Si noti che la risposta selezionata è una buona, ma non vedo a fare qualcosa di simile quindi ho lavorato gli straordinari su di esso:)

ho messo questo in un esempio.

Dato 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> 

Fare quanto segue e avrai la tua risposta. I pensare è ora la più elegante di tutte le soluzioni date, ma vorrei valorizzare gli altri input su questo un po '.

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(); 
  }) 
});

Answer 8

È anche possibile fare questo senza modificare voi HTML. Questo è un plugin che ho appena scritto per questo particolare scopo:

(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);

Si può usare in questo modo:

 $('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
 });

Answer 9

Non credo che la vostra strategia per risolvere il problema è corretto che hai avuto 6 risposte che in parte risolvere il problema .....

Ma il problema più grande è che tu dici, non ci si può fidare i manutentori per usare div / campate / classi ecc.

Quello che penso che si dovrebbe fare è semplificare il processo per loro, e addestrarli per usare il tuo metodo o non di lavoro.

aggiungere qualche segno semplice up della propria e interpretare per loro.

[Q] What happens when you click this link?[/Q]
[A] This marvellous answer appears [/A]

(jQuery non risolverà il bug 'utente')