jQuery: Sélectionner des éléments avec des noms d'identifiant incrémentés?

Question

et merci d'avance pour votre aide!

Voici ma situation: J'ai un ensemble de divs dont les ID ont un nombre croissant appliqué à la fin du nom en utilisant PHP. Chacune de ces divs est ajoutée dynamiquement avec PHP (Il s'agit d'une série de questions FAQ avec un conteneur div caché avec les réponses, qui glissent vers le bas lorsque la question est cliquée.) [Exemple] [1]

limiter au nombre de questions qui apparaissent sur la page, car cela est utilisé pour un thème Wordpress et mon client veut ajouter de nouvelles questions au fur et à mesure.

Voici un exemple de la structure pour chaque question FAQ en utilisant PHP:

<?php var $faqnum = 0; $faqnum++; ?> 
<div id="faqwrap<?php $faqnum; ?>"> 
    <h4><a href="#faq<?php $faqnum; ?>" id="slidetoggle">What data is shared?</a></h4> 
    <div id="faqbox<?php $faqnum; ?>" class="slidebox"> 
     <p>Data sharing is defined by the type of service:</p> 
     <ul class="list"> 
      <li>Third-party access to data (Enhanced Services only is strictly controlled and determined by the SDA)</li> 
      <li>All members must participate in points of contact and conjunction assessment but can choose whether to participate in other services</li> 
      <li>Participation in a service requires the member to provide associated data<br /> 
     </ul> 
    </div> 
    </div> 

Maintenant, voici ce que j'ai actuellement en jQuery, et il fonctionne, mais seulement si j'ajoute un nouveau chaque fois que mon le client veut ajouter une nouvelle question.

$(document).ready(function() { 
$('.slidebox*').hide(); 

// toggles the slidebox on clicking the noted link 
    $("#faqwrap1 a:not(div.slidebox a)").click(function() { 
     $("#faqbox1.slidebox").slideToggle('normal'); 
     $('div.slidebox:not(#faqbox1)').slideUp('normal'); 

return false; 
    }); 
}); 

Je pensais que peut-être quelque chose de faire avec une variable déclarée, comme ceci:

for (var x = 0; x < 100; x++;) { 
$('#[id^=faqwrap]'+ x 'a:not(div.slidebox a)')... 
} 

J'espère que cela est assez clair pour vous! Encore une fois, je vous remercie d'avance. :)

Answer 1

Sans changer en cours de balisage, cela fonctionnerait:

// toggles the slidebox on clicking the noted link 
$("div[id=^faqwrap]").each(function() { 
    var $faqwrap= $(this); 
    $faqwrap.find("h4 > a").click(function() { 
    var $currentSlidebox = $faqwrap.children(".slidebox"); 
    $currentSlidebox.slideToggle('normal'); 
    $('div.slidebox').not($currentSlidebox).slideUp('normal'); 
    return false; 
    }); 
}); 

Peut-être que vous pouvez trouver quelques suggestions dans le code ci-dessus que vous aider.

Comme @Berin, je recommande également de donner une classe CSS distincte à la DIV externe et de l'utiliser comme un sélecteur, au lieu de $("div[id=^faqwrap]").

Answer 2

La meilleure façon de gérer cela est de ne pas utiliser les ID, mais d'utiliser des classes pour l'élément externe. Ainsi, votre PHP serait modifié comme suit:

<?php var $faqnum = 0; $faqnum++; ?> 
<div id="faqwrap<?php $faqnum; ?>" class="question">  
    <h4><a href="#faq<?php $faqnum; ?>" class="slidetoggle">What data is shared?</a></h4>  
    <div id="faqbox<?php $faqnum; ?>" class="slidebox"> 
     <p>Data sharing is defined by the type of service:</p> 
     <ul class="list"> 
      <li>Third-party access to data (Enhanced Services only is strictly controlled and determined by the SDA)</li> 
      <li>All members must participate in points of contact and conjunction assessment but can choose whether to participate in other services</li> 
      <li>Participation in a service requires the member to provide associated data<br /> 
     </ul> 
    </div> 
</div> 

Votre JQuery serait réécrite avec le sélecteur de la classe « question ».

$(document).ready(function() {  
$('.slidebox*').hide();  

// toggles the slidebox on clicking the noted link  
$(".question a:not(div.slidebox a)").click(function() { 
    /* close everything first */ 
    $('div.slidebox').slideUp('normal');  
    /* selects and opens the the slidebox inside the div */ 
    $(".slidebox", this).slideToggle('normal'); 

    return false;  
});  
});  

Ceci vous apportera l'effet recherché. Les différences clés dans JQuery sont la façon dont vous obtenez la diapositive dans la question qui a été cliquée. J'utilise la sélection étendue $(".slidebox", this) pour obtenir uniquement la diapositive à l'intérieur de l'élément ".question" cliqué. La différence visuelle subtile est que le slideUp() se produit avant le slideToggle(). Cela fermera essentiellement toutes les requêtes ouvertes avant d'ouvrir celui désiré. Si vous gardez vos animations rapidement, ce sera plus que parfait. L'avantage de cette approche est que vous n'avez pas à vous soucier du nombre de questions sur une page, et que les sélecteurs sont probablement plus optimisés que la boucle for.

Modifier J'ai ajusté le code PHP pour utiliser une classe pour "slidetoggle" au lieu d'un id. C'est techniquement une erreur HTML pour avoir plusieurs ID qui sont identiques. Il peut se débarrasser de certaines technologies d'assistance pour les personnes handicapées. Je suppose que cette section de code a été répétée plusieurs fois sur la page.