javascript - Hvordan finne en forelder med en kjent klasse i jQuery?

Jeg har en <div> som har mange andre <div>er inni seg, hver på et forskjellig nivå av innlemming. I stedet for å gi hvert barn <div> en identifikator, foretrekker jeg å bare gi rot-<div>en identifikatoren. Her er et eksempel:

<div class="a" id="a5">
  <div class="b">
    <div class="c">
      <a class="d">
      </a>
    </div>
  </div>
</div>

Hvis jeg skriver en funksjon i jQuery for å reagere på klassen d og jeg vil finne ID-en til dens forelder, klassen a, hvordan ville jeg gjøre dette?

Jeg kan ikke bare gjøre $ ('.a').attr('id');, fordi det er flere klasser a. Jeg kunne finne forelderens foreldres foreldres ID, men det virker som dårlig design, langsomt og ikke veldig polymorft (jeg måtte skrive ulik kode for å finne ID-en for klasse c).

Svar #1

Forutsatt at this er .d, kan du skrive

$(this).closest('.a');

Metoden closest returnerer den innerste forelderen til elementet ditt som samsvarer med velgeren.

Svar #2

Send en selektor til jQuery parents-funksjonen:

d.parents('.a').attr('id')

REDIGER Hmm, faktisk er Slaks sitt svar overlegent hvis du bare vil ha den nærmeste forfaderen som matcher din velger.

Svar #3

Utdraget fra kommentarene til @Resord ovenfor. Denne fungerte for meg og var mer i samsvar med spørsmålet.

$(this).parent().closest('.a');

Takk

Svar #4

Du kan bruke parents() for å hente alle foreldre med den gitte selektoren.

Beskrivelse: Hent forfedrene til hvert element i det gjeldende settet med samsvarende elementer, valgfritt filtrert etter en velger.

Men parent() vil bare hente den første forelderen til elementet.

Beskrivelse: Hent forelderen til hvert element i det gjeldende settet av matchende elementer, valgfritt filtrert etter en selektor.

jQuery parent() vs. parents()

Og det finnes .parentsUntil() som jeg tror vil være best.

Beskrivelse: Hent forfedrene til hvert element i det nåværende settet av samsvarende elementer, opp til men ikke inkludert elementet som samsvarer med velgeren.

Svar #5

<div id="412412412" class="input-group date">
     <div class="input-group-prepend">
          <button class="btn btn-danger" type="button">Button Click</button>
          <input type="text" class="form-control" value="">
      </div>
</div>

I min situasjon bruker jeg denne koden:

$(this).parent().closest('.date').attr('id')

Håper dette hjelper noen.

Relaterte artikler