JQuery znajduje pierwszy element nadrzędny z określonym prefiksem klasy

124

Chcę uzyskać pierwszego rodzica, który ma określony prefiks klasy, przypuśćmy:

<div class="div-a3332"> 
  <div class="div-a89892">
    <p>
      <div class="div-b2">
        <div id="divid">hi</div>
      </div>
    </p>
  </div>
</div>

Na przykład mój bieżący element to #dividi chcę znaleźć pierwszy element, który ma prefiks klasy div-a. Zasadniczo wybierze:

<div class="div-a89892">

jquery jquery-selectors

— Podróż w czasie
źródło

Zatrzymać. Używaj wielu klas, zamiast łączyć informacje w jedną klasę. Selektor „dopasowania” jest powolny, a ten projekt nie skaluje się pod kątem żadnych modyfikacji. <div class='a'>, a następnie określ reguły div.a. Właściwie nie wiem, dlaczego divw ogóle podajesz nazwę klasy.

— Stefan Kendall,

Mimo to nie łącz danych w prefiksy klas. To okropny wzorzec i można go łatwo naprawić za pomocą wielu klas.

— Stefan Kendall,

@StefanKendall: Czasami masz do czynienia z bzdurami innych firm, a czasami wspierasz starsze aplikacje, których nie możesz szybko naprawić. Zły projekt jest faktem i jest to całkowicie uzasadnione pytanie.

— Nerdmaster

Odpowiedzi:

222

Użyj .closest()z selektorem:

var $div = $('#divid').closest('div[class^="div-a"]');

— Matt Ball
źródło

A tak przy okazji, nie mam pojęcia, dlaczego głosowano w dół. Selektor przedrostka klasy jest kruchy, ale będzie działał.

— Matt Ball,

Do OP: Upewnij się, że element, którego szukasz, jest elementem nadrzędnym znajdującym się gdzieś w drzewie DOM, a nie rodzeństwem lub podobnym obiektem, którego szukasz (zgodnie z dokumentacją). Nie jest „najbliżej w dowolnym miejscu w dokumencie”, ale „najbliżej poprzez obróbkę drzewa DOM”.

— Christian P.

Nie działa na mnie. Chcę też znaleźć pierwszy element, który ma określony prefiks, który nie musi być elementem div.

— Podróż w czasie

@Time następnie usunąć divselektor Element: $('#divid').closest('[class^="div-a"]'). Jak jednak skomentował @Stefan, naprawdę powinieneś używać wielu klas.

— Matt Ball

Ten selektor zajmuje absurdalną liczbę cykli (ale nadal może być szybki). Jeśli potrzebujesz obsługi IE6, IE7 lub IE8, może to naprawdę cię zepsuć, jeśli Twój DOM stanie się zbyt duży; IE wyświetla okno dialogowe „skrypt nie odpowiada”, gdy wykonywana jest pewna liczba instrukcji JS VM, a NIE po pewnym czasie. Widziałem skrypty, które kończyły się w przeglądarce Internet Explorer 0.1ms, właśnie z tego powodu.

— Stefan Kendall,

Jquery pozwolił później znaleźć rodziców tą .parents()metodą.

Dlatego polecam stosowanie:

var $div = $('#divid').parents('div[class^="div-a"]');

Daje to wszystkie węzły nadrzędne pasujące do selektora. Aby uzyskać pierwszego rodzica pasującego do selektora, użyj:

var $div = $('#divid').parents('div[class^="div-a"]').eq(0);

W przypadku innych takich zapytań dotyczących przechodzenia przez DOM , zapoznaj się z dokumentacją dotyczącą przechodzenia przez DOM .

— Sunny R Gupta
źródło

Odpowiedź nie jest myląca, po prostu pokazuje inną alternatywę dla .closest (), .parents () wygląda bardziej czytelnie i jest kolejnym rozwiązaniem problemu.

— Sunny R Gupta,

Najbliższe jest lepszym rozwiązaniem niż to, ponieważ najbliższy znajdzie tylko pierwsze dopasowanie, podczas gdy rodzice znajdą WSZYSTKIE dopasowania w górę DOM. Oczywiście bardziej wydajne jest użycie najbliższej, chociaż zgadzam się, nie jest to najlepiej nazwana funkcja.

— Mog0

Co zabawne, skończyło się na używaniu tego rozwiązania, ponieważ .parentsUtil () nie działało tak, jak się spodziewałem.

— Mark Handy,