Селектор jQuery: Id заканчивается?


394

selectorМогу ли я запросить элементы с идентификатором, который заканчивается данной строкой?

Скажем, у меня есть элемент с идентификатором ctl00$ContentBody$txtTitle. Как я могу получить это, просто пройдя txtTitle?


16
старый добрый мастер страницы идентификация калечат!
Мэтью Локк

1
Установите ClientIDMode=staticс ASP.Net 4.0 и избавьтесь от этого :)
Murali Murugesan

1
ClientIDMode = static не будет работать для тех, кто пытается найти элемент в повторителе!
Стюарт

Ответы:


630

Если вы знаете тип элемента, то: (например: замените 'element' на 'div')

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

Если вы не знаете тип элемента:

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

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



10
Я искал бы это, заканчивающееся '$ txtTitle'. С префиксом «txt» не так много риска, но если вы выбираете «NameTextBox», он будет соответствовать «NameTextBox», «FirstNameTextBox», «LastNameTextBox» и т. Д.
Марк

11
Анонимный пользователь только что попытался отредактировать следующее в. Добавление его в качестве комментария (как кажется, имеет смысл): Это не дает элементы, заканчивающиеся на id txtTitle. Вот документы: api.jquery.com/element-selector ..element селектор эквивалентен getElementsByTagName. Это не имеет ничего общего с идентификатором элемента. Если вы хотите получить доступ к элементам, заканчивающимся на id, используйте этот синтаксис $ ("[id $ = 'txtTitle']") или если вы знаете тип элемента ..eg div .. затем используйте этот синтаксис $ ("div [id $ = 'txtTitle'] ")
Пекка

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']"). Это потому, что двоеточие не разрешено в ID (но JSF добавляет его!)?
Пану Хаарамо

Есть ли способ использовать этот селектор с CSS, как псевдо-селекторы?
Алехандро Нава

250

Ответ на этот вопрос $("[id$='txtTitle']"), как ответил Марк Херд , но для тех, кто, как и я, хочет найти все элементы с идентификатором, который начинается с данной строки (например, txtTitle), попробуйте это ( doc ):

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

Если вы хотите выбрать элементы, идентификатор которых содержит данную строку ( документ ):

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

Если вы хотите выбрать элементы, идентификатор которых не является заданной строкой ( doc ):

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

(также соответствует элементам, которые не имеют указанного атрибута)

Если вы хотите выбрать элементы, идентификатор которых содержит данное слово, разделенное пробелами ( doc ):

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

Если вы хотите выбрать элементы, идентификатор которых равен заданной строке или начинается с этой строки, за которой следует дефис ( doc ):

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

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

2
@AlanMacdonald Я не уверен, что это правильно, чтобы добавить его. Я ответил на вопрос очень долго после того, как ответ был принят, просто чтобы добавить больше информации для посетителей. Я надеюсь, что люди, которые поддержат мой ответ, также проголосуют за ответ на вопрос.
Romain Guidoux

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

1
@AlanMacdonald Готово, вы меня убедили.
Romain Guidoux

33

Пытаться

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

редактировать: 4 секунды позже: P


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

Не обязательно указывать фрагмент текста, с которым вы сопоставляете


2
Это должен быть правильный ответ! Использование «и» только сбивает с толку.
Кис К. Баккер,

13

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

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

(где element - это тип элемента, который вы пытаетесь найти - например div, inputи т. д.

(Обратите внимание, вы предполагаете, что в ваших идентификаторах, как правило, есть знаки $, но я думаю, что .NET 2 теперь вместо этого использует подчеркивание в идентификаторе, поэтому в моем примере используется подчеркивание).


1
Да ты прав. ID свойство использует подчеркивание. Имя свойства использует знак доллара.
Джош Стодола

3

Пример: выбрать все <a>файлы с идентификатором, оканчивающимся на _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', а вам не хватает ведущего, #чтобы соответствовать идентификатору. Но OP уже отклонил подобное предложение (так как оно было удалено): это не сработает, если я не помещу свой Javascript прямо в разметку, что является организационным кошмаром. Поведенческое разделение имеет решающее значение для этого проекта.
Мартин Питерс

1

Попробуй это:

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

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

0

Чтобы найти идентификатор iframe, заканчивающийся на «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.