Question

如果可以根据文本的一部分在DOM中搜索标签吗？

例如，如果我有以下标记：

<input type="checkbox" id="1">
<label for="1">Check Box One</label>
<br />
<input type="checkbox" id="2">
<label for="1">Check Box Two</label>
<br />
<input type="checkbox" id="3">
<label for="1">Check Box Three</label>
<br />

我希望能够搜索“Box T”并获得最后两个标签。或者我只需搜索所有标签，运行每个查询，然后手动检查文本值？

Answer 1

自定义jQuery选择器过滤器

我认为最好和最强可重用的解决方案是创建一个jQuery选择器过滤器：

$.extend($.expr[":"], {
    hastext: function(el, index, match) {
       return $(el).text().indexOf(match[3]) >= 0;
    }
});

然后可以这样使用：

$("label:hastext('Box T')");
$("label:hastext(Box T)"); // would do the trick just as well

后来它可以在任何选择器上使用

$("div.main table:first td:hastext(Get it?)")

此代码未经过测试，可能无法按预期工作，但您明白了。它至少应该检查match[3] ...

中的值

Answer 2

为什么不搜索选中的输入？使用相关名称设置复选框的ID。添加一个类和$（'。searching_class：checked'）。val（）将为您提供所有选中的复选框值

Answer 3

循环将是IMO最简单的方式：

var arrMatchingLabels = [];
$("label").each(function(index) {
    if ($(this).html().indexOf("Box T") >= 0) 
        arrMatchingLabels.push($(this));
});

var s = "Found " + arrMatchingLabels.length + " matching labels: \n";
for (var i = 0; i < arrMatchingLabels.length; i++)
    s += arrMatchingLabels[i].html() + "\n";
alert(s);

Answer 4

也许你把div放在你的标签和输入上。然后你可以隐藏并根据你的过滤器显示div。我会将您的文本搜索作为一个属性来分隔视觉内容和逻辑（稍后您可以本地化您的应用程序并保持搜索关键字相同，但用户会看到例如西班牙语文本）。

<label filterText="Check Box One" for="1">Check Box One</label>

然后使用Attribute Contains selector您可以查找标签并使用容器div隐藏或显示输入+标签

$('label[filterText *= "your_keyword_here"]').each(function () { 
    // finds closest div and hides it
    $(this).closest('div').hide();
});

我希望这有帮助！

jQuery按其值过滤输入

4 个答案:

自定义jQuery选择器过滤器