Question

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

这可能与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');

参考文献：

Answer 2

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

Answer 3

试

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

Answer 4

这是使用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方法与此答案。

无论如何，我以为我会和你分享这个选择，而其他人也可能觉得它很有用。

Answer 5

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

var id = label.htmlFor;

像：

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

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

5 个答案: