Znajdź wszystkie elementy z określoną wartością atrybutu w jquery

88

Muszę znaleźć wszystkie elementy, które mają specjalną wartość atrybutu.

Oto div, które muszę znaleźć (mam ich wiele ..)

<div imageId='imageN'>...

Muszę po prostu przejrzeć elementy div, które mają imageId='imageN'

jquery

— Pabuc
źródło

6

Zalecam używanie class="imageN"ze względu na prawidłowy HTML. Albo to, albo data-imageId="imageN"ze względu na poprawny HTML5. W przypadku tego pierwszego można by użyć selektora klas.

— Andy E

Andy, powodem tego jest to, że te elementy div są dodawane dynamicznie z poziomu kodu i mają różne identyfikatory ImageId, ale tę samą klasę ”.

— Pabuc

3

Możesz mieć wiele zajęć, class="image imageN"jeśli to pomoże.

— Val

Dlaczego więc nie wybrać nazwy klasy, jeśli mają już tę samą klasę?

— Praxis Ashelin

142

$('div[imageId="imageN"]').each(function() {
    // `this` is the div
});

Aby sprawdzić, czy atrybut istnieje, niezależnie od wartości, możesz zamiast tego użyć tego selektora: $('div[imageId]')

— ThiefMaster
źródło

4

@ThiefMaster - Jeśli wartość atrybutu nie jest stała (tzn. Będzie się zmieniać), to jak ją znaleźć?

— Deweloper

kilka pytań: 1- co z innymi elementami… 2- co z innymi wartościami… Mogę mieć atrybut data-food na wielu elementach: div, img i td, gdzie każdy ma inną wartość.

— dsdsdsdsd

@ParthoGanguly Używasz zmiennej w ten sposób: $ ('div [imageId = "' + variableName + '"]')

— Kama

1

To rozwiązanie tak naprawdę nie odpowiada tytułowi tej strony. Szukasz elementów, które są divami. Właściwe rozwiązanie to takie, które jest niezależne od rzeczywistego elementu.

— AndroidDev

164

Chociaż nie jest to dokładna odpowiedź na pytanie, trafiłem tutaj, szukając sposobu na uzyskanie kolekcji elementów (potencjalnie różnych nazw tagów), które po prostu miały podaną nazwę atrybutu (bez filtrowania według wartości atrybutu). Zauważyłem, że dobrze sprawdzają się u mnie:

$("*[attr-name]")

Mam nadzieję, że pomoże to komuś, kto trafi na tę stronę, szukając tego samego co ja :).

Aktualizacja: Wygląda na to, że gwiazdka nie jest wymagana, tj. Na podstawie kilku podstawowych testów, następujące wydaje się być równoważne powyższym (dzięki Mattowi za zwrócenie uwagi):

$("[attr-name]")

— sammy34
źródło

Idealny! Właśnie tego szukałem.

— Paulius Matulionis,

Całkiem możliwe ... Nie sprawdzałem aspektu wydajności (nie był to ważny czynnik w moim przypadku).

— sammy34

3

Czy jest jakaś różnica między tym a $("[attr-name]")? (tj. nie *)

— Matthew

Tak, jest między nimi pewna różnica. notacja gwiazdy powoduje błąd w przeglądarce Firefox !!!! (Unescaped ...)

— ozz

dodając do tego, możesz także dołączyć wartość atrybutów, np .:$("[data-toggle='modal']")

— MeltingDog

12

Nie nazywa się to tagiem; to, czego szukasz, nazywa się atrybutem HTML.

$('div[imageId="imageN"]').each(function(i,el){
  $(el).html('changes');
  //do what ever you wish to this object :) 
});

— Val
źródło

5

Możesz użyć częściowej wartości atrybutu, aby wykryć element DOM za pomocą znaku (^). Na przykład masz takie elementy div:

<div id="abc_1"></div>
<div id="abc_2"></div>
<div id="xyz_3"></div>
<div id="xyz_4"></div>...

Możesz użyć kodu:

var abc = $('div[id^=abc]')

To zwróci tablicę DOM elementów div, które mają identyfikator zaczynający się od abc:

<div id="abc_1"></div>
<div id="abc_2"></div>

Oto demo: http://jsfiddle.net/mCuWS/

— Krunal
źródło

4

Użyj konkatenacji ciągów. Spróbuj tego:

$('div[imageId="'+imageN +'"]').each(function() {
    $(this);   
});

— LostSenSS
źródło