Obtention d'un élément à l'aide de jquery avec des noms de classe similaires

Question

J'ai deux balises div dont les noms de classe sont similaires, la seule différence est que le second div a un nom de classe étendu. Comment puis-je récupérer les 2 éléments séparément dans 2 variables différentes en utilisant jquery.

<div class='container'> 
    <div class='submit'></div> 
    <div class='submit newClass'></div> 
</div> 

Dans l'exemple ci-dessus je besoin l'élément qui a la classe 'submit' et non 'submit newClass'.

Si j'ai fait $('div.container .submit'), cela me donne à la fois les balises div. Comment puis-je y parvenir? Je ne voudrais pas utiliser les sélections basées sur l'index ou en utilisant la méthode 'first' dans jquery.

Answer 1

Dans votre exemple, la deuxième div n'a pas vraiment un « nom de la classe étendue » comme vous le dites, il a deux classes distinctes, submit et newClass. Si tel est le cas, vous pouvez exclure des éléments correspondant à .newClass de votre sélection en utilisant le pseudo-sélecteur :not:

var elements = $(".submit:not(.newClass)"); 

Sinon, vous pouvez utiliser la méthode not:

var elements = $(".submit").not(".newClass"); 

Si d'autre part votre exemple est faux et vous avez réellement un nom de classe plus long qui commence par "soumettre", vous pouvez utiliser le "contains word" sélecteur:

var elements = $("[class~=submit]"); 

Answer 2

Utilisez :not avec la classe que vous ne voulez pas:

$('div.container .submit:not(.newClass)')