jQuery Określa, czy dopasowana klasa ma podany identyfikator

96

Co to jest jQuery ma odpowiednik id poniższej instrukcji?

$('#mydiv').hasClass('foo')

więc możesz podać nazwę klasy i sprawdzić, czy zawiera podany identyfikator.

coś jak:

$('.mydiv').hasId('foo')
Nicholas Murray
źródło
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ę:

$("#foo.bar"); // Matches <div id="foo" class="bar">

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'
Sampson
źródło
32
+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?

prodigitalson
źródło
17
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 ... .
prodigitalson
19

aktualizacja: przepraszam, źle zrozumiałem pytanie, usunięto .has() odpowiedź.

inny alternatywny sposób, utwórz .hasId()wtyczkę

// the plugin
$.fn.hasId = function(id) {
  return this.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');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="mydiv" id="foo"></div>
<div class="mydiv"></div>

ewwink
źródło
5
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

<div id="myDiv">
    <div id="fo"><div>
    <div id="bar"><div>
</div>

Możesz albo napisać coś takiego jak znaleźć

$('#myDiv').find('#bar')

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ę

<div id="myDiv">
    <div id="fo"><div>
    <div id="bar"><div>
    <div id="fo1"><div>
    <div id="bar1"><div>
    <div id="fo2"><div>
    <div id="bar2"><div>
</div>

$('#myDiv div').each(function() {
   if($(this).attr('id') == 'bar1')
       //do something with bar1
});

Ten sam kod można łatwo zmodyfikować dla selektora klas.

<div id="myDiv">
    <div class="fo"><div>
    <div class="bar"><div>
    <div class="fo"><div>
    <div class="bar"><div>
    <div class="fo"><div>
    <div class="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 :)

Nima Foladi
źródło
4
$('#' + theMysteryId + '.someClass').each(function() { /* do stuff */ });
Spiczasty
źródło
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.

Stella
źródło
3

Sprawdź, czy identyfikator elementu istnieje

if ($('#id').attr('id') == 'id')
{
  //OK
}

Việt Anh
źródło
1

Możesz również sprawdzić, czy element id jest używany, robiąc to:

if(typeof $(.div).attr('id') == undefined){
   //element has no id
} else {
   //element has id selector
}

Używam tej metody dla globalnych tabel danych i określonych uporządkowanych tabel danych

user3379167
źródło
undefined powinno być w cudzysłowie, aby działało tak, jak
Leo