jQuery Selector: Id kończy się na?

393

Czy istnieje selectormożliwość zapytania o elementy o identyfikatorze kończącym się danym ciągiem?

Powiedz, że mam element o identyfikatorze ctl00$ContentBody$txtTitle. Jak mogę to uzyskać, przekazując tylko txtTitle?

jquery jquery-selectors

— Josh Stodola
źródło

16

dobre stare identyfikatory strony wzorcowej!

— Matthew Lock

1

Ustaw ClientIDMode=staticod ASP.Net 4.0 i pozbądź się tego :)

— Murali Murugesan

1

ClientIDMode = static nie będzie działać dla osób próbujących znaleźć element w repeaterze!

— Stuart

629

Jeśli znasz typ elementu, to: (np .: zamień „element” na „div”)

$("element[id$='txtTitle']")

Jeśli nie znasz typu elementu:

$("[id$='txtTitle']")

Więcej informacji dostępnych

Pokaż fragment kodu

// the old way, needs exact ID: document.getElementById("hi").value = "kk";
$(function() {
  $("[id$='txtTitle']").val("zz");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="ctl_blabla_txtTitle" type="text" />

Rozwiń fragment kodu

— Mark Hurd
źródło

10

Szukałbym go kończącego się na „$ txtTitle”. Przedrostek „txt” nie stanowi większego ryzyka, ale jeśli wybierzesz opcję „NameTextBox”, pasowałby on do „NameTextBox”, „FirstNameTextBox”, LastNameTextBox ”itp.

— Mark

11

Anonimowy użytkownik właśnie próbował edytować następujące elementy. Dodanie go jako komentarza (wydaje się, że ma to sens): Nie daje to elementów kończących się na id txtTitle. Oto dokumentacja: api.jquery.com/element-selector .. selektor elementu jest równoważny z getElementsByTagName. Nie ma to nic wspólnego z identyfikatorem elementu. Jeśli chcesz uzyskać dostęp do elementów kończących się na id, użyj tej składni $ („[id $ = 'txtTitle']”) lub jeśli znasz typ elementu ..eg div .. następnie użyj tej składni $ („div [id $ = 'txtTitle'] ")

— Pekka

1

Link był bardzo przydatny. Nie jest to sama strona, ale utworzyła 2 dodatkowe strony, których potrzebowałem. Nauczyłem się, jak przechwytywać segmenty tytułu, na przykład jeśli ID odwołuje się jako „masterPage1_Control0_MyTableName_moreStuff” w View Source, mógłbym zablokować moją tabelę <asp: Table ID = „MyTable” ... za pomocą $ („id * = MyTable] ”). Pomyśl o tym, lubię id $ lepiej. Hmmm ...

— Lukas,

Znajduje to element document.getElementById("f:fTest:j_idt51:0:inpTest"). To nie robi $("[id$='inpTest']"). Czy to dlatego, że dwukropek nie jest dozwolony w ID (ale dodaje go JSF!)?

— Panu Haaramo,

Czy istnieje sposób używania tego selektora z CSS, podobnie jak pseudo-selektory?

— Alejandro Nava

250

Odpowiedź na pytanie brzmi $("[id$='txtTitle']"), jak odpowiedział Mark Hurd , ale dla tych, którzy, podobnie jak ja, chcą znaleźć wszystkie elementy o identyfikatorze rozpoczynającym się od określonego ciągu (na przykład txtTitle), wypróbuj to ( doc ):

$("[id^='txtTitle']")

Jeśli chcesz wybrać elementy, których identyfikator zawiera podany ciąg ( dokument ):

$("[id*='txtTitle']")

Jeśli chcesz wybrać elementy, których identyfikator nie jest podanym łańcuchem ( dokument ):

$("[id!='myValue']")

(pasuje również do elementów, które nie mają określonego atrybutu)

Jeśli chcesz wybrać elementy, których identyfikator zawiera dane słowo, oddzielone spacjami ( doc ):

$("[id~='myValue']")

Jeśli chcesz wybrać elementy, których identyfikator jest równy podanemu ciągowi lub zaczynając od tego ciągu, po którym następuje myślnik ( doc ):

$("[id|='myValue']")

— Romain Guidoux
źródło

Jeśli dodasz ten, który faktycznie odpowiada na pytanie, tj. $ („[Id $ = 'txtTitle']”) i umieścisz go na pierwszym miejscu na liście, głosuję za twoją odpowiedzią. Nie mogę w tej chwili, ponieważ nie odpowiadasz na pytanie

— Alan Macdonald

2

@AlanMacdonald Nie jestem pewien, czy warto go dodać. Odpowiedziałem na to pytanie długo po zaakceptowaniu odpowiedzi, aby dodać więcej informacji dla odwiedzających. Mam nadzieję, że ludzie, którzy głosują za moją odpowiedzią, również głosują na odpowiedź na pytanie.

— Romain Guidoux,

1

@RainainGuidoux wystarczy, że to twój telefon, ale nie głosuję za odpowiedziami, które nie oferują rozwiązania zadanego pytania, ponieważ nie jest oczywiste, że początkujący doświadczają tego samego problemu, co OP, jeśli wejdą na stronę i pojawi się głosowana odpowiedź, która nawet nie odpowiada na pytanie. Jeśli zmieniłeś ją, aby odpowiedzieć na pytanie, głosowałbym za Twoją odpowiedzią zamiast odpowiedzi zaakceptowanej, ponieważ jest to pełniejsza i bardziej użyteczna odpowiedź. Eter to lub powinien być komentarz do zaakceptowanej odpowiedzi, a nie odpowiedź na pytanie.

— Alan Macdonald

1

@AlanMacdonald Gotowe, przekonałeś mnie.

— Romain Guidoux,

33

Próbować

$("element[id$='txtTitle']");

edycja: opóźnienie 4 sekundy: P.

— kkyy
źródło

32

$('element[id$=txtTitle]')

Cytowanie fragmentu tekstu, do którego pasujesz, nie jest absolutnie konieczne

— Scott Evernden
źródło

2

To powinna być właściwa odpowiedź! Używanie „i” jest tylko mylące.

— Kees C. Bakker

13

Bezpieczniej jest dodać podkreślenie lub $ do wyszukiwanego terminu, więc mniej prawdopodobne jest dopasowanie innych elementów, które kończą się tym samym identyfikatorem:

$("element[id$=_txtTitle]")

(gdzie elementem jest rodzaj elementu starasz się znaleźć - na przykład div, inputitd.

(Uwaga, sugerujesz, że twoje identyfikatory mają na ogół znaki $, ale myślę, że .NET 2 używa teraz w podkreśleniu identyfikatorów, więc mój przykład używa podkreślenia).

— Nick Gilbert
źródło

1

Tak masz rację. Właściwość ID używa podkreślenia. Właściwość name używa znaku dolara.

— Josh Stodola

3

Przykład: aby wybrać wszystkie <a>s z identyfikatorem kończącym się na _edit:

jQuery("a[id$=_edit]")

lub

jQuery("a[id$='_edit']")

— Anton K
źródło

3

Ponieważ jest to ASP.NET, możesz po prostu użyć znacznika ASP <% =%>, aby wydrukować wygenerowany identyfikator klienta txtTitle:

$('<%= txtTitle.ClientID %>')

Spowoduje to ...

$('ctl00$ContentBody$txtTitle')

... gdy strona jest renderowana.

Uwaga: w Visual Studio Intellisense będzie krzyczeć na ciebie za umieszczenie znaczników ASP w JavaScript. Możesz to zignorować, ponieważ wynikiem jest poprawny JavaScript.

— Michał
źródło

4

OP nie ma 'ctl00$ContentBody$txtTitle', on ma 'txtTitle', a brakuje ci wiodącej pozycji, #by dopasować identyfikator. Ale OP już odrzucił podobną sugestię (ponieważ została usunięta): To nie zadziała, dopóki nie wstawię mojego Javascript bezpośrednio w znacznikach, co jest koszmarem organizacyjnym. Separacja behawioralna ma kluczowe znaczenie dla tego projektu.

— Martijn Pieters

1

Spróbuj tego:

<asp:HiddenField ID="0858674_h" Value="0" runat="server" />

var test = $(this).find('[id*="_h"').val();

— pawel
źródło

0

Aby znaleźć identyfikator iframe kończący się na „iFrame” na stronie zawierającej wiele iframe.

jQuery(document).ready(function (){     
                  jQuery("iframe").each(function(){                     
                    if( jQuery(this).attr('id').match(/_iFrame/) ) {
                            alert(jQuery(this).attr('id'));

                     }                   
                  });     
         });

— neelmeg
źródło