jQuery Détermine si une classe correspondante a un identifiant donné

Qu'est-ce que jQuery a l'équivalent de l'instruction suivante?

$('#mydiv').hasClass('foo')

afin que vous puissiez donner un nom de classe et vérifier qu'il contient un identifiant fourni.

quelque chose comme:

$('.mydiv').hasId('foo')

Vous pouvez intégrer cette logique dans le sélecteur en combinant plusieurs sélecteurs . Par exemple, nous pourrions cibler tous les éléments avec un identifiant donné, qui ont également une classe particulière:

$("#foo.bar"); // Matches <div id="foo" class="bar">

Cela devrait ressembler à quelque chose que vous écrivez en CSS. Notez qu'il ne s'appliquera pas à tous les #fooéléments (bien qu'il ne devrait y en avoir qu'un), et qu'il ne s'appliquera pas à tous les .baréléments (bien qu'il puisse y en avoir plusieurs). Il ne fera référence qu'aux éléments qui se qualifient sur les deux attributs.

jQuery a également une excellente .isméthode qui vous permet de déterminer si un élément a certaines qualités. Vous pouvez tester une collection jQuery par rapport à un sélecteur de chaîne, un élément HTML ou un autre objet jQuery. Dans ce cas, nous allons simplement le vérifier par rapport à un sélecteur de chaîne:

$(".bar:first").is("#foo"); // TRUE if first '.bar' in document is also '#foo'

J'utiliserais probablement $('.mydiv').is('#foo');Cela dit si vous connaissez l'identifiant, pourquoi ne l'appliquez-vous pas simplement au sélecteur en premier lieu?

mise à jour: désolé, mal compris la question, .has()réponse supprimée .

une autre façon alternative, créer un .hasId()plugin

// the plugin
$.fn.hasId = function(id) {
  return this.attr('id') == id;
};

// select first class
$('.mydiv').hasId('foo') ?
  console.log('yes') : console.log('no');

// select second class
// $('.mydiv').eq(1).hasId('foo')
// or
$('.mydiv:eq(1)').hasId('foo') ?
  console.log('yes') : console.log('no');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="mydiv" id="foo"></div>
<div class="mydiv"></div>

Disons que vous parcourez certains objets DOM et que vous voulez trouver et attraper un élément avec un certain ID

<div id="myDiv">
    <div id="fo"><div>
    <div id="bar"><div>
</div>

Vous pouvez soit écrire quelque chose comme trouver

$('#myDiv').find('#bar')

Notez que si vous utilisez un sélecteur de classe, la méthode find renverra tous les éléments correspondants.

ou vous pouvez écrire une fonction itérative qui fera un travail plus avancé

<div id="myDiv">
    <div id="fo"><div>
    <div id="bar"><div>
    <div id="fo1"><div>
    <div id="bar1"><div>
    <div id="fo2"><div>
    <div id="bar2"><div>
</div>

$('#myDiv div').each(function() {
   if($(this).attr('id') == 'bar1')
       //do something with bar1
});

Le même code pourrait être facilement modifié pour le sélecteur de classe.

<div id="myDiv">
    <div class="fo"><div>
    <div class="bar"><div>
    <div class="fo"><div>
    <div class="bar"><div>
    <div class="fo"><div>
    <div class="bar"><div>
</div>

$('#myDiv div').each(function() {
   if($(this).hasClass('bar'))
       //do something with bar
});

Je suis heureux que vous ayez résolu votre problème avec index (), ce qui fonctionne pour vous. J'espère que cela aidera d'autres personnes avec le même problème. À votre santé :)

$('#' + theMysteryId + '.someClass').each(function() { /* do stuff */ });

Juste pour dire que j'ai finalement résolu cela en utilisant index ().

RIEN d'autre ne semblait fonctionner.

Donc, pour les éléments frères, c'est une bonne solution si vous sélectionnez d'abord par une classe commune et que vous souhaitez ensuite modifier quelque chose différemment pour chaque classe spécifique.

EDIT: pour ceux qui ne savent pas (comme moi) index () donne une valeur d'index pour chaque élément qui correspond au sélecteur, à partir de 0, en fonction de leur ordre dans le DOM. Tant que vous savez combien d'éléments il y a avec class = "foo", vous n'avez pas besoin d'un identifiant.

Évidemment, cela n'aidera pas toujours, mais quelqu'un pourrait le trouver utile.

Vérifier si l'ID de l'élément existe

if ($('#id').attr('id') == 'id')
{
  //OK
}

Vous pouvez également vérifier si l'élément id est utilisé en procédant ainsi:

if(typeof $(.div).attr('id') == undefined){
   //element has no id
} else {
   //element has id selector
}

J'utilise cette méthode pour les tables de données globales et les tables de données ordonnées spécifiques