jQuery case à cocher question

Question

J'ai hérité de l'extrait de code suivant:

<div id="topbox"> 
    <h3> 
     <div class="compare_link">Compare Products</div> 
    <input type="checkbox" id="compare_123" name="chkcompare[]" value="123" /> 
    </h3> 
</div> 

Ce que je suis en train de comprendre est:

Je veux trouver tous les sélecteurs h3 qui ont case compare_link et HTML comme les enfants et déplacez la case à cocher de 10 pixels.

Je sais que je peux trouver des cases à cocher avec jQuery, mais puis-je le faire si le frère est compare_link?

Je n'ai pas accès à certains codes, c'est pourquoi je ne peux pas décocher la case moi-même.

Answer 1

Vous n'avez pas besoin de jQuery pour cela. Vous pouvez le faire avec CSS. Cependant, la prise en charge du navigateur peut varier.

h3 > div.compare_link + input[type="checkbox"] { 
    margin-top: 10px; 
} 

Si vous souhaitez utiliser jQuery, cela nécessite des sélecteurs CSS. Donc, ce qui suit devrait fonctionner:

$('h3 > div.compare_link + input[type="checkbox"]') 

Answer 2

Demandez-vous simplement le sélecteur?

$('h3 > .compare_link + :checkbox') 

Answer 3

Pour le meilleur usage de flexibilité:

$('h3 div.compare_link').siblings('input:checkbox') 

Ceci permet de sélectionner toutes les cases qui sont frères et soeurs de la classe avec divs compare_link. Le div avec la classe compare_link doit être les descendants d'un tag h3.

L'avantage est que cela fonctionne même la case à cocher est déplacer en face de la div ou une autre div est placé entre ou si le div compare_link est enveloppé dans un autre div etc ...