jQuery 选择器：ID 以？答案

【问题标题】：jQuery Selector: Id Ends With?jQuery 选择器：ID 以？
【发布时间】：2010-10-11 04:44:16
【问题描述】：

是否有 selector 可以查询 ID 以给定字符串结尾的元素？

假设我有一个 id 为 ctl00$ContentBody$txtTitle 的元素。我怎样才能通过只传递txtTitle 得到这个？

【问题讨论】：

好旧的母版页 ID 修改！
从 ASP.Net 4.0 开始设置 ClientIDMode=static 并摆脱这个:)
ClientIDMode=static 不适用于那些试图在中继器中查找元素的人！

【解决方案1】：

如果您知道元素类型，那么：（例如：将“元素”替换为“div”）

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

如果你不知道元素类型：

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

More information available

// 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" />

【讨论】：

我会寻找以“$txtTitle”结尾的。使用“txt”前缀风险不大，但如果选择器是“NameTextBox”，它将匹配“NameTextBox”、“FirstNameTextBox”、“LastNameTextBox”等。
一位匿名用户刚刚尝试编辑以下内容。将其添加为评论（似乎很有意义）：这不会给出以 id txtTitle 结尾的元素。这是文档：api.jquery.com/element-selector ..element 选择器等同于 getElementsByTagName。它与元素的 id 无关。如果要访问以 id 结尾的元素，请使用此语法 $("[id$='txtTitle']") 或者如果您知道元素的类型 ..e.g. div ..然后使用这个语法 $("div[id$='txtTitle']")
链接非常有用。不是它自己的页面，而是我需要的另外 2 个页面。我学会了如何捕获标题的片段，例如如果 ID 在查看源代码中显示为“masterPage1_Control0_MyTableName_moreStuff”，我可以使用 $("id* =我的表]”）。想想看，我更喜欢 id$。嗯...
这会找到元素document.getElementById("f:fTest:j_idt51:0:inpTest")。这不是$("[id$='inpTest']")。是不是因为ID中不允许冒号（但是JSF加了！）？
有没有办法在 CSS 中使用这个选择器，比如伪选择器？

【解决方案2】：

试试

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

编辑：晚了 4 秒：P

【讨论】：

【解决方案3】：

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

引用您要匹配的文本片段并不是绝对必要的

【讨论】：

这应该是正确的答案！使用 " 和 ' 只会令人困惑。

【解决方案4】：

将下划线或 $ 添加到您要搜索的字词中更安全，因此不太可能匹配以相同 ID 结尾的其他元素：

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

（其中 element 是您要查找的元素类型 - 例如 div、input 等。

（注意，您是在暗示您的 ID 中往往带有 $ 符号，但我认为 .NET 2 现在倾向于在 ID 中使用下划线，因此我的示例使用下划线）。

【讨论】：

是的，你是对的。 ID 属性使用下划线。名称属性使用美元符号。

【解决方案5】：

一个例子：选择 ID 以 _edit 结尾的所有<a>s：

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

或

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

【讨论】：

【解决方案6】：

问题的答案是$("[id$='txtTitle']")、as Mark Hurd answered，但是对于像我一样想要查找所有具有以给定字符串开头的 id 的元素（例如txtTitle），试试这个（doc）：

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

如果您想选择 id 包含给定字符串 (doc) 的元素：

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

如果您想选择 id 不是给定字符串 (doc) 的元素：

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

（也匹配没有指定属性的元素）

如果您想选择 id 包含给定单词的元素，以空格分隔 (doc)：

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

如果您想选择 id 等于给定字符串或以该字符串开头后跟连字符 (doc) 的元素：

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

【讨论】：

如果您添加实际回答问题的那个，即 $("[id$='txtTitle']") 并将其放在列表的第一位，我会投票给您的答案。我现在不能，因为你没有回答这个问题
@AlanMacdonald 我不确定添加它是否正确。我在一个答案被接受后很久才回答这个问题，只是为了给访问者添加更多信息。我希望支持我的答案的人也支持这个问题的答案。
@RomainGuidoux 很公平，这是你的电话，但我不赞成那些不能解决所问问题的答案，因为对于遇到与 OP 相同问题的新手来说，如果他们来了，这并不明显到页面，有一个投票的答案甚至没有回答这个问题。如果你改变它来回答这个问题，我会赞成你的答案而不是接受的答案，因为它是一个更完整和更有用的答案。或者它应该是对已接受答案的评论，而不是对问题的答案。
@AlanMacdonald Done，你说服了我。

【解决方案7】：

为了在包含许多 iframe 的页面中找到以“iFrame”结尾的 iframe id。

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

                     }                   
                  });     
         });

【讨论】：

【解决方案8】：

试试这个：

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

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

【讨论】：

【解决方案9】：

由于这是 ASP.NET，您可以简单地使用 ASP 标签打印生成的 txtTitle 的 ClientID：

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

这将导致...

$('ctl00$ContentBody$txtTitle')

...当页面被渲染时。

注意：在 Visual Studio 中，Intellisense 会因为您在 JavaScript 中放置 ASP 标签而大喊大叫。您可以忽略它，因为结果是有效的 JavaScript。

【讨论】：

OP 没有'ctl00$ContentBody$txtTitle'，他有'txtTitle'，并且你缺少前导# 来匹配一个id。但是 OP 已经拒绝了一个类似的建议（自删除以来）： 除非我将我的 Javascript 直接放在标记中，否则这将不起作用，这是组织的噩梦。行为分离对这个项目至关重要。