jQuery选择器：以ID结尾？

Question

有没有一种可以查询以给定字符串结尾的 ID 元素的 选择器？

比如我有一个 ID 为 ctl00$ContentBody$txtTitle 的元素。通过传递 txtTitle，我该如何获取它呢？

- Josh Stodola

---

经典的主页面 ID 混淆！ - Matthew Lock

从ASP.Net 4.0开始，设置ClientIDMode=static并摆脱这个问题 :) - Murali Murugesan

ClientIDMode=static 对于那些试图在重复器中查找元素的人是无效的！ - Stuart

Answer 1

如果您知道元素类型，则可以进行以下操作：（例如：将“元素”替换为“div”）

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

如果您不知道元素类型：

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

更多信息可用

---

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

- Mark Hurd

---

我会寻找以“$txtTitle”结尾的内容。使用“txt”前缀不太会有风险，但如果您的选择器是“NameTextBox”，它将匹配“NameTextBox”、“FirstNameTextBox”、“LastNameTextBox”等内容。 - Mark

一个匿名用户刚刚试图编辑以下内容。将其作为评论添加（因为它似乎有意义）：这不会给出以id为 txtTitle 结尾的元素。这是文档：http://api.jquery.com/element-selector/。元素选择器相当于getElementsByTagName，与元素的id无关。如果您想访问以id结尾的元素，则使用此语法 $("[id$='txtTitle']") 或者如果您知道元素的类型，例如 div，则使用此语法 $("div[id$='txtTitle']")。 - Pekka

链接非常有用。不是页面本身，而是它分成了两个我需要的附加页面。我学会了如何捕获标题的片段，例如如果在查看源代码中出现ID为“masterPage1_Control0_MyTableName_moreStuff”，我可以使用$（“id * = MyTable]”）锁定<asp：Table ID =“MyTable”...的我的表格。想想看，我更喜欢id $。嗯... - Lukas

这会找到元素 document.getElementById("f:fTest:j_idt51:0:inpTest")。而这个不行 $("[id$='inpTest']")。是因为冒号在ID中不被允许（但JSF添加了它！）吗？ - Panu Haaramo

有没有办法在CSS中使用这个选择器，比如伪选择器？ - alejnavab

Answer 2

这个问题的答案是$("[id$='txtTitle']")，正如Mark Hurd所回答的那样。但是对于那些像我一样想找到所有id以给定字符串开头的元素（例如txtTitle）的人，可以尝试使用以下方法（doc）：

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

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

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

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

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

它也匹配没有指定属性的元素。

如果你想选择id中包含给定单词（由空格分隔）的元素（doc）：

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

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

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

- Romain Guidoux

---

如果你把实际回答这个问题的那个放在列表的首位，即$("[id$='txtTitle']")，我会点赞你的答案。目前我不能点赞你的答案，因为它并没有回答问题。 - Alan Macdonald

@AlanMacdonald 我不确定是否应该添加它。我是为了为访问者添加更多信息而在答案被接受很久后回答了这个问题。我希望那些点赞我的答案的人也可以给问题的答案点赞。 - Romain Guidoux

@RomainGuidoux，说得好，这是你的决定，但我不会给那些没有解决问题的答案点赞，因为对于新手来说，如果他们来到页面上，看到一个被点赞却根本没回答问题的答案，很难理解和解决自己遇到的同样问题。如果你改成回答问题的形式，我会给你的答案点赞，因为它是更全面、更有用的答案。或者，它应该作为对被接受的答案的评论，而不是作为问题的答案。 - Alan Macdonald

@AlanMacdonald好的，你说服我了。 - Romain Guidoux

Answer 3

尝试

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

编辑：比他晚了4秒 :P

- kkyy

Answer 4

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

你不一定需要在匹配的文本片段上加引号。

- Scott Evernden

---

这应该是正确的答案！使用“和'只会让人困惑。 - Kees C. Bakker

Answer 5

为了避免匹配其他以相同ID结尾的元素，更安全的做法是在搜索项中添加下划线或$符号：

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

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

(请注意，您提到您的ID倾向于包含美元符号，但我认为.NET 2现在倾向于在ID中使用下划线，因此我的示例使用下划线。)

- Nick Gilbert

---

是的，你说得对。ID属性使用下划线。Name属性使用美元符号。 - Josh Stodola

Answer 6

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

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

或者

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

- Anton Kraievyi

Answer 7

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

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

这将导致...

$('ctl00$ContentBody$txtTitle')

...在页面呈现时。

注意：在Visual Studio中，智能提示会警告您不要在JavaScript中使用ASP标签。您可以忽略此警告，因为结果是有效的JavaScript代码。

- Michael

---

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

Answer 8

试试这个：

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

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

- pawel

Answer 9

在包含许多iframe的页面中查找以"iFrame"结尾的iframe id。

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

                     }                   
                  });     
         });

- neelmeg