Wybierz elementy według atrybutu

253

Mam kolekcję pól wyboru z wygenerowanymi identyfikatorami, a niektóre z nich mają dodatkowy atrybut. Czy można użyć JQuery do sprawdzenia, czy element ma określony atrybut? Czy mogę na przykład sprawdzić, czy następujący element ma atrybut „myattr”? Wartość atrybutu może się różnić.

<input type="checkbox" id="A" myattr="val_attr">A</input>

Na przykład, w jaki sposób mogę uzyskać kolekcję wszystkich pól wyboru, które mają ten atrybut, bez sprawdzania jeden po drugim? czy to możliwe?

Ciprian Grosu
źródło
2
Nawiasem mówiąc, <input /> jest pustym znacznikiem, który nie powinien zawierać treści. Być może nie interesuje Cię sprawdzanie poprawności widzenia, ponieważ masz myatttr ...
ScottE
Jeśli masz już kolekcję i chcesz odfiltrować tylko elementy o określonym atrybucie - po prostu zrób to -$filtered = $collection.filter('[attribute_name]');
jave.web

Odpowiedzi:

190

Czy masz na myśli, że możesz je wybrać? Jeśli tak, to tak:

$(":checkbox[myattr]")
Cletus
źródło
4
Zauważ, że jeśli testujesz na istnienie (prawdopodobnie na przykład w instrukcji if), prawdopodobnie bardziej poprawne / niezawodne jest wykonanie: if ($ (": checkbox [myattr]"). Length ()> 0) ...
rinogo
14
@ rinogo: właściwie wszystko czego potrzebujesz to if ($ (": checkbox [myattr]"). length). () Po długości nie jest konieczne, podobnie jak> 0, 0 nie ma wartości false w testach równości, które nie wymagają ścisłej równości (zarówno wartości, jak i typu).
bmarti44
1
Zgłasza błędy js, jeśli spróbujesz czegoś takiego: td [myattr]. Myślę więc, że ta funkcja była specjalnie ukierunkowana na pola wyboru.
fooledbyprimes
6
Dwukropek wybiera pseudoklasy, określone przez typ attr. Aby zastosować to samo do td's, po prostu pomiń dwukropek.
dhochee
Lub jeśli chcesz sprawdzić, czy coś nie ma atrybutu, na przykład znajdź wszystkie linki, które nie mają hrefatrybutów. $("#myBox").find('a').filter(':not([href])')
timbrown
368
if ($('#A').attr('myattr')) {
    // attribute exists
} else {
    // attribute does not exist
}

EDYTOWAĆ:

Powyższe spadnie do else-gałęzi, jeśli myattristnieje, ale jest pustym ciągiem lub „0”. Jeśli jest to problem, powinieneś wyraźnie przetestować undefined:

if ($('#A').attr('myattr') !== undefined) {
    // attribute exists
} else {
    // attribute does not exist
}
Stefan Gehrig
źródło
3
Niezbyt dobra odpowiedź. „undefined” nie jest słowem kluczowym w Javascript. Zobacz constc.blogspot.com/2008/07/…
mhenry1384
16
Masz rację ... Ale przedefiniowanie undefinedjest uważane za przypadek skrajny, a powyższe porównanie zadziała w 99% wszystkich przypadków.
Stefan Gehrig,
6
Nie działa, jeśli atrybut ma pusty ciąg. Przykładem jest myattr = ''
mityczny programista
3
@mhenry - wtedy będziesz w błędzie :) Jeśli budowałeś projekt dla mnie lub obok mnie, wymagałbym naprawy błędu. Gdyby był to pakiet typu open source, to ja (wraz z wieloma użytkownikami) przestałbym go używać z powodu tego, że był źle zakodowany. Jeśli go nie zmienisz, ktoś inny ostatecznie rozwinie wersję bez błędu, a ludzie skorzystają z niej zamiast tego, a ty stracisz swój własny projekt, jak to miało miejsce wiele razy wcześniej, gdy ktoś tworzy pakiet, który jest dobrym pomysłem słaba implementacja. W każdym razie nauczy cię to lekcji kodowania :)
Jimbo Jonny,
8
if (typeof $ ('# A'). attr ('myattr')! == 'undefined')
James Westgate
166

Wiem, że minęło dużo czasu, odkąd pytanie zostało zadane, ale okazało się, że czek jest bardziej przejrzysty:

if ($("#A").is('[myattr]')) {
    // attribute exists
} else {
    // attribute does not exist
}

(Jak znaleziono na tej stronie tutaj )

Dokumentacja o to można znaleźć tutaj

Jonathan Bergeron
źródło
Według W3C atrybuty logiczne są definiowane przez obecność lub brak atrybutu. jQuery udostępnia metodę .attr () do manipulowania wartościami atrybutów. Ale jak dodać atrybut bez wartości? Podana metoda testowania obecności atrybutu nie jest opisana w dokumentacji jQuery (1.8.2). Czy wiesz, jak dodać atrybut za pomocą jQuery?
chmike
@chmike Aby dodać atrybut, zrobiłbym to w ten sposób: $ („# A”). prop („myNewAttribute”, someValue); Możesz podać someValue dowolną wybraną przez siebie wartość: ciąg, liczba, pusty ciąg, prawda / fałsz.
Jonathan Bergeron
Spowoduje to dodanie atrybutu z przypisaną wartością, która nie jest tym samym co atrybut bez wartości.
chmike
5
Zgadzam się, to najlepsza odpowiedź (przy użyciu jQuery) - bardzo jasna i zwięzła. Zastanawiałem się, dlaczego jQuery nie ma tylko funkcji hasAttribute (), a odpowiedź brzmi, że natywny javascript już ją ma. Każdy element HTML Dom ma metodę hasAttribute („nazwa_atrybutu”). Więc możesz zrobić: $ ('# A') [0] .hasAttribute ('myattr') @chmike - Nie sądzę, że możesz dodać pusty atrybut za pomocą funkcji jQuery, ale możesz to zrobić za pomocą elementu HTML Dom obiekt w podobny sposób, jak poniżej: $ („# A”) [0] .setAttributeNode (document.createAttribute („myNewAttribute”));
Daniel Howard
1
Tylko komentarz, który podoba mi się w tej odpowiedzi, ale myliłem się co do komentarzy z pytaniem, jak dodać atrybut bez wartości. Nie są one związane z pytaniem lub odpowiedzią.
goodeye,
9

To zadziała:

$('#A')[0].hasAttribute('myattr');
powermikee
źródło
2
patrz link: stackoverflow.com/questions/1318076/…
RetroCoder
@RetroCoder, jaki masz sens na temat linku? Ten test wydaje się całkiem dobry, zwłaszcza, że ​​często używasz go $(this).<something>tutaj, gdy możesz to zrobić this.hasAttribute('...')bezpośrednio (i nie przejmuj się oczywiście starszymi przeglądarkami.)
Alexis Wilke,
8

W JavaScript ...

null == undefined

... zwraca true*. To różnica między ==i ===. Ponadto undefinedmożna zdefiniować nazwę (to nie jest słowo kluczowe podobne do „ nullis”), więc lepiej sprawdzić w inny sposób. Najpewniejszym sposobem jest prawdopodobnie porównanie wartości zwracanej przez typeofoperatora.

typeof o == "undefined"

Niemniej jednak porównanie z wartością null powinno działać w tym przypadku.

* Zakładając, że undefinedw rzeczywistości jest niezdefiniowany.

bambams
źródło
Undefined nie jest zastrzeżonym słowem kluczowym w JavaScript. W jQuery mung można nazwać dokładnie dlatego, że jest on zbudowany z konstruktora „var” i nie jest ceniony. Rzeczywiście, na górze kodu biblioteki magicznej znajduje się wiersz z napisem „var undefined;” i w ten sposób zdefiniowana jest niezdefiniowana zmienna o tej nazwie w zakresie jQuery ... Ale to samo można nazwać „bez nazwy”, wpisując „var bez nazwy”;
Emanuele Del Grande,
1
To nie sprawdza atrybutu, to sprawdza właściwość w obiekcie javascript, dlaczego to ma 6 głosów pozytywnych?
ncubica
5

$("input[attr]").length może być lepszym rozwiązaniem.

ssps
źródło
4

Kilka pomysłów zostało podrzuconych przy użyciu „typeof”, jQuery „.is” i „.filter”, więc pomyślałem, że opublikuję szybkie ich porównanie. Typeof wydaje się najlepszym wyborem do tego. Podczas gdy inne będą działać, wydaje się, że istnieje wyraźna różnica w wydajności podczas wywoływania biblioteki jq dla tego wysiłku.

Daved
źródło
2
if (!$("#element").attr('my_attr')){
  //return false
  //attribute doesn't exists
}
Furia
źródło
1
to prawdopodobnie nie zadziała, ponieważ możesz dodać atrybut bez wartości. w takim przypadku warunek ten minie, chociaż pożądanym zachowaniem może być zwrócenie wartości true, atrybut jest ustawiony. podobny do PHPs isset()lub na przykład w js $("#element").attr('my_attr') === false,
ulkas
2

jak w tym poście , używając .isi selektora atrybutów [], możesz łatwo dodać funkcję (lub prototyp):

function hasAttr($sel,attr) {
    return $sel.is('['+attr+']');
}
dhc
źródło
1
$("input#A").attr("myattr") == null
Mathias F.
źródło
1
$ (). attr () nie zwróci null, jak sugeruje nasz przykład, zamiast tego zwróci niezdefiniowane.
Stefan Gehrig
Działa dla mnie w firebug, ale to może być coś w stylu firebug
Mathias F
Nie próbowałem tego, ale tak mówi dokumentacja: docs.jquery.com/Attributes/attr#name
Stefan Gehrig
1

po prostu:

$('input[name*="value"]')

więcej informacji: oficjalne dokumenty

Kambiz
źródło
1
Nieokreślone podwójne cudzysłowy w ciągu zdefiniowanym za pomocą podwójnych cudzysłowów, a nie prawidłowy ciąg. Niestety nie mogę go dla ciebie edytować, ponieważ edycja musi zmienić 6 lub więcej znaków, ale trzeba ją zmienić.
Jimbo Jonny
0

Oprócz wybierania wszystkich elementów z atrybutem $('[someAttribute]')lub $('input[someAttribute]')możesz także użyć funkcji do wykonywania operacji logicznych na obiekcie, na przykład w module obsługi kliknięć:

if(! this.hasAttribute('myattr') ) { ...

AaronLS
źródło
0

Utworzyłem pakiet npm z zamierzonym zachowaniem, jak opisano powyżej w pytaniu.

Link do [npm] i [github]

Użycie jest bardzo proste. Na przykład:

<p id="test" class="test">something</p>
$("#test").hasAttr("class")

zwraca true.

Działa również z camelcase.

Strzelec
źródło
0

Aby wybrać elementy posiadające określony atrybut, zobacz powyższe odpowiedzi.

Aby ustalić, czy dany element jQuery ma określony atrybut, używam małej wtyczki, która zwraca, truejeśli pierwszy element w kolekcji ajQuery ma ten atrybut:

/** hasAttr
 ** helper plugin returning boolean if the first element of the collection has a certain attribute
 **/
$.fn.hasAttr = function(attr) {
   return 0 < this.length
       && 'undefined' !== typeof attr
       && undefined !== attr
       && this[0].hasAttribute(attr)
}
ErnestV
źródło
-5

JQuery zwróci atrybut jako ciąg. Dlatego możesz sprawdzić długość tego ciągu, aby ustalić, czy jest ustawiony:

if ($("input#A").attr("myattr").length == 0)
 return null;
else
 return $("input#A").attr("myattr");
zach
źródło
Wiem, że minął już ponad rok i powinienem był się tym zająć dawno temu. Jestem ciekawy, która część nie zadziałała? Gdybym wiedział, że tylko próbujesz je wybrać, nie dałbym powyższego kodu. Myślałem, że chcesz je sprawdzić indywidualnie. JQuery w rzeczywistości zwraca atrybut jako ciąg znaków i możesz sprawdzić długość tego ciągu, tak jak każdy inny ciąg. Tak więc, dopóki Twój selektor i atrybut są poprawne, powinieneś być w stanie przetestować, czy określone dane wejściowe mają ten atrybut. W każdym razie po prostu nie chciałem, żeby ludzie pomijali tę zasadę, ponieważ to działa.
zach
6
nie powiedzie się w przypadku, gdy atrybut nie występuje w tym przypadku $ ( „input # A”) attr ( „myattr”) powrót niezdefiniowany zamiast łańcucha i undefined.length zawiedzie.
Rune FS
Wykrywa tylko pusty atrybut w porównaniu z atrybutem z zawartością, nie działa na nieistniejącym atrybucie. Pierwotne pytanie dotyczyło wykrycia istnienia atrybutu, co czyni go niepowodzeniem jako odpowiedzią na pytanie.
Jimbo Jonny