en essayant d'obtenir 1 classe à partir d'un élément qui en a deux dans jQuery

Question

Je veux cibler un élément qui a deux noms de classe:

<li style="display:none;" class="productList product-1"> 
    <p class="removeIcon"><img src="images/remove-icon.jpg" align="Remove Product" /></p> 
    <span class="companyName">Company 1 goes here and here is a test for two lines</span> 
</li> 

Quand j'essaye d'obtenir la classe de Li dans jQuery:

var parent = $(this).parent().get(0).className(); 

retourne « ProductList produit-1 » Je veux être en mesure de revenir ou de réduire la production pour être juste: "produit-1". Je sais que c'est probablement assez facile, mais je ne connais pas un moyen en ce moment.

J'ai besoin qu'il soit dans cet ordre de classe définissant aussi. Une autre fonction est l'utilisation de la "productList" partie ...

Je serais d'accord avec la suppression de la première partie s'il y a un moyen de le faire?

Answer 1

this.parentNode.className.split(' ')[1]; 

ou avec jQuery:

$(this).parent().attr('class').split(' ')[1]; 

mais je préfère la première.

Answer 2

var parent = $(this).parent().attr('class').split(' ')[1]; 

Cela devrait faire le travail pour vous!

Answer 3

Je veux cibler un élément qui a deux noms de classe fixés sur elle

if($(this).hasClass('firstOne') && $(this).hasClass('secondOne')) { 
    ... 
} 

Answer 4

Pas une réponse à votre question, à proprement parler, mais une alternative: .data()

Bien qu'il soit très fréquent d'utiliser des classes pour ce type de stockage de données, elles sont sous-optimales, en grande partie en raison de l'obligation d'analyser les données, comme vous l'avez vu. Cependant, les versions récentes de jQuery prennent en charge le style HTML5 qui effectue le même travail beaucoup mieux. (Et faire travail avec HTML4 et XHTML, si vous obtenez des erreurs de validation.)

Pour les utiliser, changer votre code HTML à quelque chose comme:

<li style="display:none;" class="productList" data-product="1"> 
    <p class="removeIcon"><img src="images/remove-icon.jpg" align="Remove Product" /></p> 
    <span class="companyName">Company 1 goes here and here is a test for two lines</span> 
</li> 

En jQuery, vous pouvez utiliser .data() :

var parent = $(this).parent().get(0).data("product"); // parent === 1 

(Notez que le "1" dans votre code HTML converti automagiquement obtient à partir d'une chaîne en nombre.)