Chcę zastosować styl do określonego elementu div. Na przykład w czasie ładowania wszystkie z klasą foo byłyby wyświetlane, ale mogę chcieć wyłączyć jedną instancję klasy foo, która ma identyfikator bar.
Nicholas Murray
1
Wtedy po prostu zrobisz, $('#bar.foo').toggle();że będziesz mieć tylko jeden identyfikator, ponieważ WYMAGANE jest, aby był unikalny dla dokumentu. jeśli chcesz przełączyć ten identyfikator tylko wtedy, gdy należy do klasy, foopo prostu dodaj klasę do selektora identyfikatora. jeśli selektor znajdzie pusty zestaw, nic się nie stanie, jeśli znajdzie zestaw z wynikami (z których będzie tylko jeden), to przełączy element. Myślę, że za bardzo się nad tym zastanawiasz.
prodigitalson
3
po prostu powiedzieć, że frustruje ludzi, którzy mówią „dlaczego miałbyś kiedykolwiek chcieć to zrobić?” kiedy próbuję to teraz zrobić. Problem z hasClass polega na tym, że zwraca wartość True, jeśli JAKIKOLWIEK element, który pasuje do selektora, ma podaną klasę. Więc gdy mam wiele p z klasą „ciasto” i dodatkowymi nazwami klas dla każdej („jeden”, „dwa” itp.) Mam problem. Chcę wybrać ogólny zestaw p.cake, a następnie mieć warunek (jeśli class = "one" - $ var = 23 - etc). Chodzi o to, że próbuję przekazać inną zmienną $ w zależności od nazwy dodatkowej klasy. Staram się nie powtarzać całego kawałka
Stella
Odpowiedzi:
171
Możesz wstawić tę logikę do selektora, łącząc wiele selektorów . Na przykład moglibyśmy kierować reklamy na wszystkie elementy o danym identyfikatorze, które również mają określoną klasę:
Powinno to wyglądać podobnie do czegoś, co napisałbyś w CSS. Zauważ, że nie będzie dotyczył wszystkich #fooelementów (chociaż powinien być tylko jeden) i nie będzie dotyczył wszystkich .barelementów (chociaż może być ich wiele). Będzie odnosić się tylko do elementów, które kwalifikują się na podstawie obu atrybutów.
jQuery ma również świetną .ismetodę, która pozwala określić, czy element ma określone właściwości. Możesz przetestować kolekcję jQuery w odniesieniu do selektora ciągu, elementu HTML lub innego obiektu jQuery. W tym przypadku po prostu porównamy to z selektorem ciągu:
$(".bar:first").is("#foo");// TRUE if first '.bar' in document is also '#foo'
+1 dla is(). Powinien istnieć .hasId()selektor tylko dlatego, że wydaje się być oczywistym partnerem dla .hasClass()naprawdę ...
Matt Fletcher
43
Prawdopodobnie użyłbym $('.mydiv').is('#foo');To powiedziane, jeśli znasz Id, dlaczego po prostu nie zastosowałbyś go do selektora w pierwszej kolejności?
Może kod przechodzi do funkcji zwrotnej, która musi inaczej obsługiwać określony przypadek. Tak więc funkcja automatycznie otrzymuje obiekt jQuery z nieznanymi atrybutami. W tym przypadku $ ('twoja odpowiedź'). Jest ('pomocne');
Peter G
1
Przychodzi mi do głowy wiele powodów. A co, jeśli chcesz zastosować ustawienie specyficzne dla urządzeń przenośnych, na przykład element o identyfikatorze id = "mobile". Dlaczego nie jest ważne.
Możliwość umieszczenia
Cóż, tylko 1 element powinien kiedykolwiek mieć dane, w idprzeciwnym razie powinien to być jakiś inny atrybut ... Przypuszczam, że jeśli strukturalna lokalizacja danego elementu zmienia się w zależności od strony lub klienta / agenta użytkownika, to ok, ale poza tym ... .
// the plugin
$.fn.hasId =function(id){returnthis.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');
Przykro mi, ale myślę, że źle zinterpretowałeś pytanie: has () API zgłasza to: Zmniejsz zestaw dopasowanych elementów do tych, które mają element podrzędny pasujący do selektora lub elementu DOM. OP pyta, jak sprawdzić, czy element z klasą „myDiv” ma również Id foo, podczas gdy has () będzie szukał elementów potomnych „myDiv” o Id „foo”.
Tilt
7
Powiedzmy, że wykonujesz iterację po niektórych obiektach DOM i chcesz znaleźć i złapać element o określonym identyfikatorze
Ten sam kod można łatwo zmodyfikować dla selektora klas.
<divid="myDiv"><divclass="fo"><div><divclass="bar"><div><divclass="fo"><div><divclass="bar"><div><divclass="fo"><div><divclass="bar"><div></div>
$('#myDiv div').each(function() {
if($(this).hasClass('bar'))
//do something with bar
});
Cieszę się, że rozwiązałeś swój problem z index (), cokolwiek działa dla Ciebie.Mam nadzieję, że pomoże to innym z tym samym problemem. Twoje zdrowie :)
każdy jest niepotrzebny, ponieważ nigdy nie będzie więcej niż jeden #theMysteryId.
prodigitalson
2
Cóż, oszczędza ci to kłopotu z przypisaniem go do zmiennej, sprawdzeniem, czy długość nie jest pusta, a następnie kontynuowaniem kodu. Jeśli selektor niczego nie pasuje, jQuery po prostu nie wywoła funkcji "each", więc jest ładny i czysty. Teraz, jeśli chcesz tylko wywołać jakieś API jQuery, to na pewno.
Pointy
4
Powiem tylko, że ostatecznie rozwiązałem to za pomocą index ().
Nic innego nie wydawało się działać.
Więc w przypadku elementów rodzeństwa jest to dobre obejście, jeśli najpierw wybierasz przez wspólną klasę, a następnie chcesz zmodyfikować coś inaczej dla każdej konkretnej.
EDYCJA: dla tych, którzy nie wiedzą (jak ja) index () podaje wartość indeksu dla każdego elementu, który pasuje do selektora, licząc od 0, w zależności od ich kolejności w DOM. Dopóki wiesz, ile elementów zawiera class = "foo", nie potrzebujesz identyfikatora.
Oczywiście nie zawsze to pomoże, ale ktoś może uznać to za przydatne.
$('#bar.foo').toggle();
że będziesz mieć tylko jeden identyfikator, ponieważ WYMAGANE jest, aby był unikalny dla dokumentu. jeśli chcesz przełączyć ten identyfikator tylko wtedy, gdy należy do klasy,foo
po prostu dodaj klasę do selektora identyfikatora. jeśli selektor znajdzie pusty zestaw, nic się nie stanie, jeśli znajdzie zestaw z wynikami (z których będzie tylko jeden), to przełączy element. Myślę, że za bardzo się nad tym zastanawiasz.Odpowiedzi:
Możesz wstawić tę logikę do selektora, łącząc wiele selektorów . Na przykład moglibyśmy kierować reklamy na wszystkie elementy o danym identyfikatorze, które również mają określoną klasę:
Powinno to wyglądać podobnie do czegoś, co napisałbyś w CSS. Zauważ, że nie będzie dotyczył wszystkich
#foo
elementów (chociaż powinien być tylko jeden) i nie będzie dotyczył wszystkich.bar
elementów (chociaż może być ich wiele). Będzie odnosić się tylko do elementów, które kwalifikują się na podstawie obu atrybutów.jQuery ma również świetną
.is
metodę, która pozwala określić, czy element ma określone właściwości. Możesz przetestować kolekcję jQuery w odniesieniu do selektora ciągu, elementu HTML lub innego obiektu jQuery. W tym przypadku po prostu porównamy to z selektorem ciągu:źródło
is()
. Powinien istnieć.hasId()
selektor tylko dlatego, że wydaje się być oczywistym partnerem dla.hasClass()
naprawdę ...Prawdopodobnie użyłbym
$('.mydiv').is('#foo');
To powiedziane, jeśli znasz Id, dlaczego po prostu nie zastosowałbyś go do selektora w pierwszej kolejności?źródło
id
przeciwnym razie powinien to być jakiś inny atrybut ... Przypuszczam, że jeśli strukturalna lokalizacja danego elementu zmienia się w zależności od strony lub klienta / agenta użytkownika, to ok, ale poza tym ... .aktualizacja: przepraszam, źle zrozumiałem pytanie, usunięto
.has()
odpowiedź.inny alternatywny sposób, utwórz
.hasId()
wtyczkęźródło
Powiedzmy, że wykonujesz iterację po niektórych obiektach DOM i chcesz znaleźć i złapać element o określonym identyfikatorze
Możesz albo napisać coś takiego jak znaleźć
Zwróć uwagę, że gdybyś użył selektora klasy, metoda find zwróci wszystkie pasujące elementy.
lub możesz napisać funkcję iterującą, która wykona bardziej zaawansowaną pracę
Ten sam kod można łatwo zmodyfikować dla selektora klas.
Cieszę się, że rozwiązałeś swój problem z index (), cokolwiek działa dla Ciebie.Mam nadzieję, że pomoże to innym z tym samym problemem. Twoje zdrowie :)
źródło
źródło
#theMysteryId
.Powiem tylko, że ostatecznie rozwiązałem to za pomocą index ().
Nic innego nie wydawało się działać.
Więc w przypadku elementów rodzeństwa jest to dobre obejście, jeśli najpierw wybierasz przez wspólną klasę, a następnie chcesz zmodyfikować coś inaczej dla każdej konkretnej.
EDYCJA: dla tych, którzy nie wiedzą (jak ja) index () podaje wartość indeksu dla każdego elementu, który pasuje do selektora, licząc od 0, w zależności od ich kolejności w DOM. Dopóki wiesz, ile elementów zawiera class = "foo", nie potrzebujesz identyfikatora.
Oczywiście nie zawsze to pomoże, ale ktoś może uznać to za przydatne.
źródło
Sprawdź, czy identyfikator elementu istnieje
źródło
Możesz również sprawdzić, czy element id jest używany, robiąc to:
Używam tej metody dla globalnych tabel danych i określonych uporządkowanych tabel danych
źródło