所以,其他人都说要使用课程——听他们说!这要容易得多!
但是,有时更改 HTML 内容根本不是一种选择。在这种情况下,我们将不得不求助于一些肮脏的工作并查看标签元素中包含的所有文本以找到相应的复选框。
var selectedCheckboxes = [];
$.each($("#container > label"),function(index,elem){
var labelText = $(elem).text();
var testString = "Workshops";
if (labelText.match(testString)){
selectedCheckboxes = $(elem).find("input[type='checkbox']:checked");
}
});
我必须警告您,此解决方案适用于您提供的简单示例,但是如果标记稍微复杂一些(例如在具有自己的文本内容的附加子元素中),那么此方法将不得不变得更大并且更复杂.
没有内置的选择器来匹配 HTML 标记中元素的文本内容,这是正确的。元素的文本内容应该只是数据或信息的可视化表示;它不应该包含身份信息。为了识别一个元素和集合与其兄弟或后代分开,我们使用id
和class
属性。还有更多可以使用的,但这些是基本的构建块。
这里要注意的一件事是 jQuery.text()
函数的行为。它会 :
获取匹配元素集中每个元素的组合文本内容,包括它们的后代。
强调添加
选择:contains()
器对于后代具有类似的行为,并且已经在之前的答案中介绍过。
关于这个限制的更实际和更直观的例子......
鉴于这个简约的 HTML 片段:
<div id="matt">
One
<span>Two</span>
<div>
<label>Three</label>
</div>
Four
</div>
调用$("#matt").text()
将导致:
一二三四
还包括所有后代文本内容...