jQuery sélection élément DOM droit

Un exemple concret:jQuery sélection élément DOM droit

J'ai quelques ensembles de listes à puces (menu + liste des produits).

Mon script de tri fonctionne correctement, mais lorsque j'essaie d'insérer deux listes sur une page, elles ne fonctionnent pas comme des listes séparées et sont triées. Et je ne veux pas ça, je veux un menu pour trier seulement la première liste ci-dessous, pas les deux.

J'ai essayé dur avec (this) .next() etc, mais rien ne aide. Je suis incapable de modifier le DOM, ne peut modifier le code jQuery.

Des idées?

HTML:

<ul class="menu"> 
    <li><a data-value="all" href="#">All</a></li> 
    <li><a data-value="big" href="#">Big</a></li> 
    <li><a data-value="small" href="#">Small</a></li> 
</ul> 

<ul class="list"> 
    <li><div data-value="big">BIG</div></li> 
    <li><div data-value="small">SMALL</div></li> 
    <li><div data-value="big">BIG</div></li> 
    <li><div data-value="small">SMALL</div></li> 
    <li><div data-value="big">BIG</div></li> 
    <li><div data-value="big">BIG</div></li> 
</ul> 

<ul class="menu"> 
    <li><a data-value="all" href="#">All</a></li> 
    <li><a data-value="big" href="#">Big</a></li> 
    <li><a data-value="small" href="#">Small</a></li> 
</ul> 

<ul class="list"> 
    <li><div data-value="big">BIG</div></li> 
    <li><div data-value="small">SMALL</div></li> 
    <li><div data-value="big">BIG</div></li> 
    <li><div data-value="small">SMALL</div></li> 
    <li><div data-value="big">BIG</div></li> 
    <li><div data-value="big">BIG</div></li> 
</ul>

jQuery:

jQuery('ul.menu li a[data-value=all]').click(function(e) { 
    jQuery('.list li div').show(); 
       e.preventDefault(); 
}); 

jQuery('ul.menu li a[data-value=big]').click(function(e) { 
    jQuery('.list li div').show(); //I know this looks just BAD, but that's just for jsfiddle 
    jQuery('.list li div[data-value=small]').hide(); 
       e.preventDefault(); 
}); 

jQuery('ul.menu li a[data-value=small]').click(function(e) { 
    jQuery('.list li div').show(); //I know this looks just BAD, but that's just for jsfiddle 
    jQuery('.list li div[data-value=big]').hide(); 
       e.preventDefault(); 
});

Un exemple concret:

http://jsfiddle.net/KezWE/

Source

2011-03-01 anonymous

Pouvez-vous donner un identifiant unique de votre ul et les référencer explicitement - à l'aide ".menu" sera affecter les deux menus - c'est comme ça que ça doit fonctionner.

Source

2011-03-01 01:25:53 Rob

Je ne peux pas, les menus sont générés automatiquement afin que les ID ne sont pas les bienvenus. Je pensais à faire quelque chose comme jQuery (this) .next ('list li div'), mais ça ne marche pas pour moi. Vous ne savez pas pourquoi, mais peut-être à cause du lien imbriqué? – anonymous

Je pense que cela est le résultat que vous recherchez: http://jsfiddle.net/KezWE/4/

Prévenez-moi!

Source

2011-03-01 01:32:47 McHerbie

fonctionne incroyable! Pouvez-vous m'aider de toute façon avec le code original? Mon JS est beaucoup plus compliqué et j'adorerais utiliser votre solution, mais s'il y a un moyen de faire fonctionner l'ancien code du premier post, ce serait parfait! – anonymous

jQuery('ul.menu li a[data-value=all]').click(function(e) { 
    var list = jQuery(this).closest('ul').next('.list'); 
    list.find('div').show(); 
    e.preventDefault(); 
}); 

jQuery('ul.menu li a[data-value=big]').click(function(e) { 
    var list = jQuery(this).closest('ul').next('.list'); 
    list.find('div').show(); 
    list.find('div[data-value=small]').hide(); 
    e.preventDefault(); 
}); 

jQuery('ul.menu li a[data-value=small]').click(function(e) { 
    var list = jQuery(this).closest('ul').next('.list'); 
    list.find('div').show(); 
    list.find('div[data-value=big]').hide(); 
    e.preventDefault(); 
});

Source

2011-03-01 01:36:21 kojiro

jQuery sélection élément DOM droit

Répondre

Questions connexes