jQuery - bascule seulement l'élément suivant

Question

Je voudrais basculer juste l'élément suivant (et pas d'autres) avec jQuery: Je m'expliquerai par des exemples.

C'est le HTML:

<article id="post-60" class="post-60 page type-page status-publish hentry"> 
    <header class="entry-header"> 
     <h1 class="entry-title">Pagine Critiche</h1> 
    </header><!-- .entry-header --> 

    <div class="entry-content"> 
     <p><strong>TITLE 1.1</strong></p> 
     <p><strong>TITLE 1.2</strong></p> 
     <p><em>Writer writes:</em></p> 
     <p>Article #1</p> 
     <p>&nbsp;</p> 

     <p><strong>TITLE 2.1</strong></p> 
     <p><strong>TITLE 2.2</strong></p> 
     <p><em>Writer writes:</em></p> 
     <p>Article #2.1</p> 
     <p>Article #2.2</p> 
     <p>Article #2.3</p> 
    </div> 
</article> 

J'aimerais cliquer sur le titre 1.1 et show (bascule) ALL qu'il ya entre 1 et TITRE TITRE 2 (donc tout entre le premier « fort p » et le second "fort p"); en quelques mots: je voudrais basculer juste l'article qui se réfère à ce titre.

J'ai essayé d'écrire ce script:

$(document).ready(function(){ 
    $("#post-60 p strong").click(function(){ 
     $("p:not(:has(strong))").toggle(500); 
    }); 
}); 

Mais il permet de basculer tout le paragraphe « normal » en même temps; voici le fiddle.
Je crois que je dois le sélecteur suivant(), mais je ne suis pas l'utiliser de la bonne façon, comme je l'ai essayé ceci:

$(document).ready(function(){ 
    $("#post-60 p strong").click(function(){ 
     $("p:not(:has(strong))").next().toggle(500); 
    }); 
}); 

, mais il ne fonctionne pas non plus. Je voudrais résoudre le problème sans avoir à modifier le balisage HTML.

Answer 1

Si vous ne pouvez pas mettre à jour votre balisage, appliquez ce JS.

$(document).ready(function(){ 
    $("#post-60 p strong").click(function(){ 
     $(this).parent().next('p').nextUntil("p:has(strong)").toggle(500); 
    }); 
}); 

violon travail https://jsfiddle.net/xpxhkh1r/3/

Il serait beaucoup plus simple si vous pouvez simplement réécrire votre balisage. Voici un exemple.

<div class="entry-content"> 
    <p><strong>TITLE 1.1</strong></p> 
    <div class="item"> 
     <p><strong>TITLE 1.2</strong></p> 
     <p><em>Writer writes:</em></p> 
     <p>Article #1</p> 
     <p>&nbsp;</p> 
    </div> 

    <p><strong>TITLE 2.1</strong></p> 
    <div class="item"> 
     <p><strong>TITLE 2.2</strong></p> 
     <p><em>Writer writes:</em></p> 
     <p>Article #2.1</p> 
     <p>Article #2.2</p> 
     <p>Article #2.3</p> 
    </div> 
</div> 

Et la JS devrait ressembler à

$(document).ready(function(){ 
    $("#post-60 p strong").click(function(){ 
     $(this).parent().next('.item').toggle(500); 
    }); 
}); 

Voir le violon mis à jour https://jsfiddle.net/xpxhkh1r/1/

Answer 2

Voulez-vous dire cela?

$(function() { 
 
    $("#post-60 p>strong").click(function() { 
 
    var $thisP = $(this).closest("p"); 
 
    if ($thisP.next().has("strong").length > 0) { // next P has strong, we are on x.1 
 
     $thisP.next().toggle(500); 
 
     $thisP.next().nextUntil("p:has(strong)").toggle(500); 
 
    } else { // we are on x.2 
 
     $thisP.nextUntil("p:has(strong)").toggle(500); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<article id="post-60" class="post-60 page type-page status-publish hentry"> 
 
    <header class="entry-header"> 
 
    <h1 class="entry-title">Pagine Critiche</h1> 
 
    </header> 
 
    <!-- .entry-header --> 
 

 
    <div class="entry-content"> 
 
    <p><strong>TITLE 1.1</strong> 
 
    </p> 
 
    <p><strong>TITLE 1.2</strong> 
 
    </p> 
 
    <p><em>Writer writes:</em> 
 
    </p> 
 
    <p>Article #1</p> 
 
    <p>&nbsp;</p> 
 

 
    <p><strong>TITLE 2.1</strong> 
 
    </p> 
 
    <p><strong>TITLE 2.2</strong> 
 
    </p> 
 
    <p><em>Writer writes:</em> 
 
    </p> 
 
    <p>Article #2.1</p> 
 
    <p>Article #2.2</p> 
 
    <p>Article #2.3</p> 
 
    </div> 
 
</article>