Question

有人能告诉我是否可以根据内容而不是 id 或类找到元素？

我试图找到没有不同类或id的元素。（然后我需要找到该元素的父级。）

Answer 1

您可以使用:contains选择器根据内容获取元素。

$('div:contains("test")').css('background-color', 'red');

<div>This is a test</div>
<div>Another Div</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Answer 2

在jQuery文档中，它说：

匹配的文本可以直接显示在所选元素中任何元素的后代或组合

因此，使用:contains() 选择器是不够的，还需要检查您搜索的文字是否为元素的直接内容你的目标是这样的：

function findElementByText(text) {
    var jSpot = $("b:contains(" + text + ")")
                .filter(function() { return $(this).children().length === 0;})
                .parent();  // because you asked the parent of that element

    return jSpot;
}

Answer 3

费拉斯，我知道这已经老了，但是嘿，我认为这个解决方案我觉得比一切都好。首先，克服了jquery：contains（）随附的Case Sensitivity：

var text = "text";

var search = $( "ul li label" ).filter( function ()
{
    return $( this ).text().toLowerCase().indexOf( text.toLowerCase() ) >= 0;
}).first(); // Returns the first element that matches the text. You can return the last one with .last()

希望有人在不久的将来发现它有用。

Answer 4

火箭的答案不起作用。

<div>hhhhhh
<div>This is a test</div>
<div>Another Div</div>
</div>

我只是修改了他的DEMO here，你可以看到根DOM被选中了。

$('div:contains("test"):last').css('background-color', 'red');

在代码中添加“：last ”选择器以解决此问题。

Answer 5

在我看来最好的方式。

$.fn.findByContentText = function (text) {
    return $(this).contents().filter(function () {
        return $(this).text().trim() == text.trim();
    });
};

Answer 6

是的，使用jQuery contains选择器。

Answer 7

以下jQuery选择包含文本但没有子级的div节点，它们是DOM树的叶节点。

$('div:contains("test"):not(:has(*))').css('background-color', 'red');

<div>div1
<div>This is a test, nested in div1</div>
<div>Nested in div1<div>
</div>
<div>div2 test
<div>This is another test, nested in div2</div>
<div>Nested in div2</div>
</div>
<div>
div3
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Answer 8

到目前为止的所有答案都不匹配 all specific 包含 direct 子文本节点的元素，该子文本节点包含 specific 文字。

考虑以下示例。我们要找到所有的霍比特人，即所有包含直接子文本节点的div，其中包含单词“霍比特人”（包括单词边框，忽略大小写）。

$(function() {
    
    const ELEMTYPE = Node.ELEMENT_NODE
    const TEXTTYPE = Node.TEXT_NODE
    
    /*
    Behaves a bit like Python's os.walk().
    The `topdown` parameter is not strictly necessary for this example.
    */
    function* walk_text(root, topdown=true) {
        const childs = []
        const textchilds = []
        for (const child of root.childNodes) {
            const childtype = child.nodeType
            if (childtype === ELEMTYPE) {
                childs.push(child)
            } else if (childtype === TEXTTYPE) {
                textchilds.push(child)
            }
        }
        if (topdown) {
            yield [root, textchilds]
        }
        for (const child of childs) {
            yield* walk_text(child, topdown)
        }
        if (!topdown) {
            yield [root, textchilds]
        }
    }
    
    function* walk_matching(startnode, nodepat, textpat) {
        for ( [elem, textchilds] of walk_text(startnode) ) {
            if ( nodepat.test(elem.nodeName) ) {
                for ( const textchild of textchilds ) {
                    if ( textpat.test(textchild.nodeValue) ) {
                        yield elem
                        break
                    }
                }
            }
        }
    }
    
    // raw dom node
    let startnode = $('body')[0]
    
    // search for element nodes with names matching this pattern ...
    let nodepat = /^div$/i
    
    // ... containing direct child text nodes matching this pattern
    let textpat = /\bhobbit\b/i
    
    for ( const node of walk_matching( startnode, nodepat, textpat ) ) {
        $(node).css({
            border: '1px solid black',
            color: 'black'
        })
    }

});

div {
    margin:10px 0;
    padding: 10px;
    border: 1px solid silver;
    color: silver;
    font-style:italic;
}

div:before {
    display:block;
    content: attr(name);
    font-style:normal;
}

/* Inserted by SO, we are not interested in it */
body + div {
    display: none;
}

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Find the hobbits</title>
    </head>
    <body>
        <div name='Tolkien'>
            book writer
            <div name='Elrond'>
                elven king
                <div name='Arwen'>elven princess</div>
                <div name='Aragorn'>human king, son-in-law</div>
            </div>
            <div name='Gandalf'>
                wizard, expert for hobbits
                <div name='Bilbo'>
                    old hobbit
                    <div name='Frodo'>
                        young hobbit
                        <div name='Samweis'>best friend hobbit</div>
                    </div>
                </div>
                <div name='Gollum'>ex hobbit</div>
                <div name='Odo'>hobbit</div>
            </div>
        </div>
        <script src= "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    </body>
</html>

找到的其他答案（搜索“霍比特人”时）：

Rocket Hazmat 的回答：托尔金、甘道夫、比尔博、佛罗多、萨姆维斯、咕噜、奥多
莫格斯的回答：托尔金
yoav barnea 的回答：Gandalf, Frodo
Nicholas Sushkin 的回答：Samweis、Gollum、Odo
Rocket Hazmat 在评论中的回答、Terry Lin 的回答、rplaurindo 的回答：Odo

所有这些答案都有意义，这取决于您想要做什么。明智地选择，因为 Rocket Hazmat 的答案、Morgs 的答案和 Terry Lin 的答案的部分性能比我的解决方案快两倍多。我想这是因为他们不需要遍历整个 DOM。大多数使用 .filter() 的答案执行得非常快。

jQuery：按文字查找元素

8 个答案: