jQuery Bestimmen Sie, ob eine übereinstimmende Klasse eine bestimmte ID hat

Was ist jQuery, dessen ID der folgenden Anweisung entspricht?

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

Sie können also einen Klassennamen angeben und überprüfen, ob er eine angegebene ID enthält.

etwas wie:

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

Sie können diese Logik in den Selektor einbinden, indem Sie mehrere Selektoren kombinieren . Zum Beispiel könnten wir alle Elemente mit einer bestimmten ID ansprechen, die auch eine bestimmte Klasse haben:

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

Dies sollte ähnlich aussehen wie etwas, das Sie in CSS schreiben würden. Beachten Sie, dass dies nicht für alle #fooElemente gilt (obwohl es nur eines geben sollte), und dass es nicht für alle .barElemente gilt (obwohl es möglicherweise viele gibt). Es werden nur Elemente referenziert, die für beide Attribute qualifiziert sind.

jQuery hat auch eine großartige .isMethode , mit der Sie feststellen können, ob ein Element bestimmte Eigenschaften hat. Sie können eine jQuery-Auflistung anhand eines Zeichenfolgenselektors, eines HTML-Elements oder eines anderen jQuery-Objekts testen. In diesem Fall überprüfen wir es einfach anhand eines String-Selektors:

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

Ich würde das wahrscheinlich verwenden. $('.mydiv').is('#foo');Das heißt, wenn Sie die ID kennen, warum würden Sie sie dann nicht einfach auf den Selektor anwenden?

Update: Entschuldigung, die Frage wurde falsch verstanden, die .has()Antwort wurde entfernt .

Eine andere Alternative ist das Erstellen eines .hasId()Plugins

// 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>

Angenommen, Sie durchlaufen einige DOM-Objekte und möchten ein Element mit einer bestimmten ID finden und abfangen

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

Sie können entweder etwas schreiben, um zu finden

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

Beachten Sie, dass die find-Methode alle übereinstimmenden Elemente zurückgibt, wenn Sie einen Klassenselektor verwenden.

oder Sie könnten eine iterierende Funktion schreiben, die fortgeschrittenere Arbeiten erledigt

<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
});

Der gleiche Code kann für die Klassenauswahl leicht geändert werden.

<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
});

Ich bin froh, dass Sie Ihr Problem mit index () gelöst haben, was auch immer für Sie funktioniert. Ich hoffe, dies wird anderen mit dem gleichen Problem helfen. Prost :)

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

Um nur zu sagen, ich habe dies schließlich mit index () gelöst.

NICHTS anderes schien zu funktionieren.

Für Geschwisterelemente ist dies eine gute Lösung, wenn Sie zuerst eine gemeinsame Klasse auswählen und dann für jede bestimmte Klasse etwas anderes ändern möchten.

BEARBEITEN: Für diejenigen, die (wie ich) nicht wissen, gibt index () einen Indexwert für jedes Element an, der mit dem Selektor übereinstimmt, und zählt von 0, abhängig von ihrer Reihenfolge im DOM. Solange Sie wissen, wie viele Elemente es mit class = "foo" gibt, benötigen Sie keine ID.

Natürlich hilft das nicht immer, aber jemand könnte es nützlich finden.

Überprüfen Sie, ob die ID des Elements vorhanden ist

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

Sie können auch überprüfen, ob das id-Element verwendet wird:

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

Ich verwende diese Methode für globale Datentabellen und bestimmte geordnete Datentabellen