javascript - 找到具有以下文本的标签的属性值

Question

我有以下 HTML 代码，需要获取标签的属性值 where text = 'Complaint'; 我找不到完成此操作的正确方法，这是因为跨度内的项目是动态加载的。因此我不能只使用生成的 id 获取值，因此我需要使用标签找到 ID。如果该标签存在，即<label for="CSSMLCall_call_outcome_types_1">Complaint</label>. 我需要得到它的attr价值。

这可能与Jquery有关吗？

<span id="CSSMLCall_call_outcome_types">
<input type="checkbox" name="CSSMLCall[call_outcome_types][]" value="5238" class="session_outcome_chk_list" id="CSSMLCall_call_outcome_types_0"> 
<label for="CSSMLCall_call_outcome_types_0">Client didn’t engage</label>
<input type="checkbox" name="CSSMLCall[call_outcome_types][]" value="4287" class="session_outcome_chk_list" id="CSSMLCall_call_outcome_types_1"> 
<label for="CSSMLCall_call_outcome_types_1">Complaint</label>

</span>

而不是$("#CSSMLCall_call_outcome_types_4").is(":checked")，我需要使用标签找到 id 然后做同样的事情。

任何及时的回复都是值得强调的。

Answer 1

我建议：

var id = $('label').filter(function(){
             return $(this).text().trim() == 'Complaint';
         }).attr('for');

参考：

• attr().
• filter().
• text().

Answer 2

var id = $('label:contains("Complaint")').attr('for');

Answer 3

对于使用 Javascript 寻找答案的任何人，请仅使用htmlFor：

var id = label.htmlFor;

喜欢：

var id = document.getElementById("myLabel").htmlFor;

Answer 4

尝试

var id = $('label[for]').filter(function(){
    return $.trim($(this).text()) == 'Complaint'
}).attr('for')

Answer 5

这是使用用 POJS 编写的 jquery 的替代方法。

HTML

<span id="CSSMLCall_call_outcome_types">
<input type="checkbox" name="CSSMLCall[call_outcome_types][]" value="5238" class="session_outcome_chk_list" id="CSSMLCall_call_outcome_types_0"> 
<label for="CSSMLCall_call_outcome_types_0">Client didn’t engage</label>
<input type="checkbox" name="CSSMLCall[call_outcome_types][]" value="4287" class="session_outcome_chk_list" id="CSSMLCall_call_outcome_types_1"> 
<label for="CSSMLCall_call_outcome_types_1">Complaint</label>
</span>

Javascript

/*jslint maxerr: 50, indent: 4, browser: true */
/*global console, jQuery, $ */

(function () {
    "use strict";

    function walkTheDOM(node, func) {
        if (node && node.nodeType) {
            if (typeof func === "function") {
                func(node);
            }

            node = node.firstChild;
            while (node) {
                walkTheDOM(node, func);
                node = node.nextSibling;
            }
        }
    }

    function escapeRegex(string) {
        return string.replace(/[\[\](){}?*+\^$\\.|]/g, "\\$&");
    }

    function filterElementsByContains(elements, string) {
        var toStringFN = {}.toString,
            text = toStringFN.call(elements),
            result,
            length,
            i,
            element;

        if (text !== "[object NodeList]" && text !== "[object Array]" && !($() instanceof jQuery)) {
            return result;
        }

        result = [];
        if (typeof string === "string") {
            string = new RegExp("^" + escapeRegex(string) + "$");
        } else if (toStringFN.call(string) !== "[object RegExp]") {
            return result;
        }

        function getText(node) {
            if (node.nodeType === 3) {
                text += node.nodeValue;
            }
        }

        length = elements.length;
        i = 0;
        while (i < length) {
            text = "";
            element = elements[i];
            walkTheDOM(element, getText);
            if (string.test(text)) {
                result.push(element);
            }

            i += 1;
        }

        return result;
    }

    function getAttribute(node, attribute) {
        var undef;

        if (!node || !node.nodeType || !attribute || typeof attribute !== "string" || !node.attributes || node.attributes[attribute] === undef) {
            return undef;
        }

        return node.attributes[attribute].nodeValue;
    }

    var labels = document.getElementsByTagName("label");

    console.log(getAttribute(filterElementsByContains(labels, "Complaint")[0], "for"));
    console.log(filterElementsByContains(labels, "C"));
    console.log(filterElementsByContains(labels, /C/));
    console.log(filterElementsByContains(labels, /client/i));
    console.log(filterElementsByContains(labels, "Client"));
    console.log(filterElementsByContains($("label"), /Client/));
}());

输出

CSSMLCall_call_outcome_types_1
[]
[label, label]
[label]
[]
[label]

在jsfiddle 上

使用这些函数，您可以提供一个NodeList、一个Array元素或一个jQuery对象作为elements参数。string参数可以是字符串或正则表达式。

它将返回一个过滤元素数组，其中包含与提供的字符串或匹配的正则表达式完全匹配的元素。

我相信这比 jquery:contains选择器更强大/更灵活，后者只能通过文本是否直接包含在所选元素中进行过滤。

这些功能应该是跨浏览器友好的，尽管我无法测试所有浏览器或所有可能的条件。

我还创建了一个jsperf，以便您可以比较 jquery 方法和这个答案。

无论如何，我想我会与你分享这个替代方案，其他人也可能会觉得它很有用。