Symbole wieloznaczne w selektorach jQuery


668

Próbuję użyć symbolu wieloznacznego, aby uzyskać identyfikator wszystkich elementów, których identyfikator zaczyna się od „jander”. Próbowałem $('#jander*'), $('#jander%')ale to nie działa ..

Wiem, że mogę użyć klas elementów, aby go rozwiązać, ale jest to również możliwe przy użyciu symboli wieloznacznych?

<script type="text/javascript">

  var prueba = [];

  $('#jander').each(function () {
    prueba.push($(this).attr('id'));
  });

  alert(prueba);


});

</script>

<div id="jander1"></div>
<div id="jander2"></div>

2
To pytanie dotyczy jQuery (a dokładniej silnika Sizzle).
Peter Örneholm

1
Tylko uwaga: byłoby znacznie szybciej zrobić to z klasami, ponieważ jQuery lub Sizzle mogą korzystać z funkcji przeglądarki (nie powinno to mieć większego znaczenia dla współczesnych przeglądarek).
Felix Kling


7
Ważną rzeczą do zapamiętania jest również to, że $("[id*=jander]")wybrałby wszystkie elementy o identyfikatorze zawierającym łańcuch znaków.
Gabriel Ryan Nahmias

Odpowiedzi:


1279

Aby uzyskać wszystkie elementy zaczynające się od „jander”, należy użyć:

$("[id^=jander]")

Aby uzyskać te, które kończą się na „jander”

$("[id$=jander]")

Zobacz także dokumentację JQuery


22
Dokumenty podają ten przykład:$('input[name^="news"]').val('news here!')
Brenden

5
Kod działa zgodnie z przeznaczeniem. Nie ma potrzeby podwójnego cytowania, to po prostu zwiększa ryzyko pominięcia cytatu zamykającego i czyni go mniej czytelnym.
nico

4
@nico Co ciekawe, doktorzy twierdzą, że działa z atrybutami i idjest technicznie właściwością , ale myślę, że z nowszymi wydaniami jquery (tj. 1.9) oraz z tym, jak obsługiwane są najnowsze zmiany w atrybutach i właściwościach, linia jest lekko rozmyta w odniesieniu do tych dwóch, a więc możesz użyć selektorów atrybutów dla (przynajmniej niektórych) właściwości.
johntrepreneur

Co jeśli chcę wybrać Parzyste z wybranych. na przykład: obecnie mam, .col-lg-4:even div:nth-child(1)gdybym chciał zrobić to samo .... co bym napisał? "[class^=.col-lg-]:even"? (Nie wydaje mi się, żeby działało)
Luis Robles,

Trochę zachowania, które mnie zaskoczyło ---- jeśli użyję tego z „class $ = ...”, przeszukuje listę klas przedmiotów, a nie nazwy poszczególnych klas. Uderza więc tylko wtedy, gdy szukana klasa jest ostatnią klasą tego przedmiotu. Nie testowałem innych niż Chrome. I nie jestem pewien, czy usterka dotyczy jQuery, czy też moich oczekiwań dotyczących jQuery.
Roger Krueger,

115

Ponieważ tytuł sugeruje symbol wieloznaczny, możesz również użyć tego:

$(document).ready(function(){
  console.log($('[id*=ander]'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="jander1"></div>
<div id="jander2"></div>

Spowoduje to wybranie podanego ciągu w dowolnym miejscu w id.


39

Wypróbuj jQuery zaczyna się od

selektor, „^ =”, np

[id^="jander"]

Muszę jednak zapytać, dlaczego nie chcesz tego robić za pomocą zajęć?


2
Aby dodać kontekst, szukam tego samego rozwiązania, ponieważ używam Django, którego klasa ModelForm dyktuje identyfikatory na podstawie modeli i nie pozwala na takie grupowanie; tzn. HTML jest poza moją kontrolą.
Christian Mann,

Jest to przydatne podczas pracy z ASP.Net WebForms, w szczególności listami radia i pól wyboru.
DavidScherer

35

do zajęć możesz użyć:

div[class^="jander"]

Nie mogłem tego uruchomić, otrzymałem komunikat o niepoprawnej składni.
stian

14

Aby uzyskać identyfikator z dopasowania znaku wieloznacznego:

$('[id^=pick_]').click(
  function(event) {

    // Do something with the id # here: 
    alert('Picked: '+ event.target.id.slice(5));

  }
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pick_1">moo1</div>
<div id="pick_2">moo2</div>
<div id="pick_3">moo3</div>


2
Zamiast „event.target.id” to też może działać: $ (this) .attr („id”)
PJ Brunet

10

W przypadku bardziej złożonego ciągu identyfikatora podwójne cudzysłowy są obowiązkowe.

Na przykład, jeśli masz taki identyfikator: id="2.2"poprawny sposób dostępu do niego to:$('input[id="2.2"]')

W miarę możliwości używaj podwójnych cudzysłowów ze względów bezpieczeństwa.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.