Вибір jQuery: Id закінчується?


393

Чи тут є selector запит на елементи з ідентифікатором, який закінчується заданим рядком?

Скажіть, у мене є елемент з ідентифікатором ctl00$ContentBody$txtTitle. Як я можу це зробити, проходячи просто txtTitle?


16
хороший старий ідентифікатор основної сторінки!
Меттью Лок

1
Виберіть ClientIDMode=staticз ASP.Net 4.0 і позбудьтесь цього :)
Murali Murugesan

1
ClientIDMode = статичний не працюватиме для тих, хто намагається знайти елемент у ретрансляторі!
Стюарт

Відповіді:


629

Якщо ви знаєте тип елемента, тоді: (наприклад: замініть 'елемент' на 'div')

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

Якщо ви не знаєте тип елемента:

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

Більше інформації доступно



10
Я б шукав, що це закінчується на "$ txtTitle". Це не так великий ризик з префіксом 'txt', але якщо ви вибрали 'NameTextBox', він би відповідав 'NameTextBox', 'FirstNameTextBox', LastNameTextBox 'і т. Д.
Марк

11
Анонімний користувач просто спробував відредагувати наступне в. Додавши його до коментаря (як здається, це має сенс): Це не дає елементам, що закінчуються id txtTitle. Ось документи: api.jquery.com/element-selector .. Селектор елементів є еквівалентом getElementsByTagName. Це не має нічого спільного з ідентифікатором елемента. Якщо ви хочете отримати доступ до елементів, що закінчуються на id, тоді використовуйте цей синтаксис $ ("[id $ = 'txtTitle']") або якщо ви знаєте тип елемента ..eg div .., тоді використовуйте цей синтаксис $ ("div [id $ = 'txtTitle'] ")
Pekka

1
Посилання було дуже корисним. Не сама сторінка, але вона розгорнулася на 2 додаткові сторінки, які мені були потрібні. Я дізнався, як захоплювати сегменти заголовка, наприклад, якщо ідентифікатор призначається як "masterPage1_Control0_MyTableName_moreStuff" у View Source, я міг зафіксувати свою таблицю <asp: Table ID = "MyTable" ... за допомогою $ ("id * = MyTable] "). Подумайте, мені більше подобається id $. Гммм ...
Лукас

Це знаходить елемент document.getElementById("f:fTest:j_idt51:0:inpTest"). Це не так $("[id$='inpTest']"). Це тому, що товсту кишку заборонено в ідентифікаторі (але JSF додає її!)?
Пану Хаарамо

Чи існує спосіб використання цього селектора з CSS, як псевдоселектори?
Алехандро Нава

250

Відповідь на питання $("[id$='txtTitle']"), як відповів Марк Херд , але для тих, хто, як я, хочуть знайти всі елементи з ідентифікатором, який починається з заданого рядка (наприклад, txtTitle), спробуйте це ( doc ):

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

Якщо ви хочете вибрати елементи, ідентифікатор яких містить заданий рядок ( doc ):

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

Якщо ви хочете вибрати елементи, ідентифікатор яких не є заданим рядком ( doc ):

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

(він також відповідає елементам, які не мають вказаного атрибута)

Якщо ви хочете вибрати елементи, id яких містить задане слово, розділене пробілами ( doc ):

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

Якщо ви хочете вибрати елементи, ідентифікатор яких дорівнює заданому рядку, або починаючи з цього рядка, а потім дефісом ( doc ):

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

Якщо ви додасте той, який насправді відповідає на питання, тобто $ ("[id $ = 'txtTitle']"), і поставте його першим у списку, я б голосував за вашу відповідь. На даний момент я не можу, тому що ви не відповідаєте на питання
Алан Макдональд

2
@AlanMacdonald Я не впевнений, що правильно його додати. Я відповів на питання довгий час після того, як відповідь була прийнята, просто для того, щоб додати більше інформації для відвідувачів. Я сподіваюся, що люди, які схвалюють мою відповідь, також схвалюють відповідь на питання.
Ромен Гіду

1
@RomainGuidoux досить чесний - це ваш дзвінок, але я не прихиляю відповіді, які не пропонують вирішення поставленого питання, тому що це не очевидно для новачків, які відчувають ту саму проблему, що і ОП, якщо вони приходять на сторінку, і там є відповідь, що не відповідає навіть на запитання. Якщо ви змінили його, щоб відповісти на запитання, я б схвалив вашу відповідь замість прийнятої відповіді, оскільки це більш повна і корисна відповідь. Ефір це чи це повинен був бути коментарем до прийнятої відповіді, а не відповіддю на питання.
Алан Макдональд

1
@AlanMacdonald Готово, ти мене переконав.
Ромен Гіду

33

Спробуйте

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

редагування: затримка на 4 секунди: P


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

Не обов'язково цитувати текстовий фрагмент, проти якого ви співпадаєте


2
Це має бути правильна відповідь! Використання "і" лише заплутано.
Kees C. Bakker

13

Безпечніше додавати підкреслення або $ до терміна, який ви шукаєте, так що менше шансів відповідати іншим елементам, які закінчуються тим самим ідентифікатором:

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

(де елемент - тип елемента, який ви намагаєтесь знайти - наприклад div, inputі т.д.

(Зверніть увагу, ви припускаєте, що у ваших ідентифікаторів зазвичай є знаки $, але я думаю, що .NET 2 зараз, як правило, використовує підкреслення в ідентифікаторі, тому мій приклад використовує підкреслення).


1
Так, ти правий. Властивість ідентифікатора використовує підкреслення. Властивість імені використовує знак долара.
Джош Стодола

3

Приклад: вибрати всі <a>s, ідентифікатор, що закінчується _edit:

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

або

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

3

Оскільки це ASP.NET, ви можете просто використовувати тег ASP <% =%> для друку згенерованого ClientID txtTitle:

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

Це призведе до ...

$('ctl00$ContentBody$txtTitle')

... коли сторінка надається.

Примітка. У Visual Studio Intellisense буде кричати на вас за те, що ви розміщуєте теги ASP в JavaScript. Ви можете проігнорувати це, оскільки в результаті дійсний JavaScript.


4
У ОП немає 'ctl00$ContentBody$txtTitle', у нього є 'txtTitle', і вам не вистачає ведучого, #який відповідає ідентифікатору. Але ОП вже відхилила подібну пропозицію (з моменту видалення): Це не спрацює, якщо я не поставлю свій Javascript безпосередньо в розмітку, що є організаційним кошмаром. Поведінкове розмежування має вирішальне значення для цього проекту.
Martijn Pieters

1

Спробуйте це:

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

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

0

Для того, щоб знайти ідентифікатор iframe, що закінчується на "iFrame" на сторінці, що містить безліч кадрів.

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

                     }                   
                  });     
         });
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.