jQuery: tìm phần tử bằng văn bản

Bất cứ ai cũng có thể cho tôi biết nếu có thể tìm thấy một yếu tố dựa trên nội dung của nó chứ không phải bởi một id hoặc lớp ?

Tôi đang cố gắng tìm các phần tử không có các lớp hoặc id riêng biệt. (Sau đó tôi cần tìm cha mẹ của phần tử đó.)

Bạn có thể sử dụng :containsbộ chọn để lấy các phần tử dựa trên nội dung của chúng.

Demo tại đây

$('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>

Trong tài liệu jQuery có ghi:

Văn bản phù hợp có thể xuất hiện trực tiếp trong phần tử được chọn, trong bất kỳ hậu duệ của phần tử đó hoặc kết hợp

Do đó, việc bạn sử dụng :contains() bộ chọn là chưa đủ , bạn cũng cần kiểm tra xem văn bản bạn tìm kiếm có phải là nội dung trực tiếp của yếu tố bạn đang nhắm mục tiêu hay không, đại loại như thế:

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;
}

Fellas, tôi biết cái này đã cũ nhưng hey tôi có giải pháp này mà tôi nghĩ là hiệu quả hơn tất cả. Đầu tiên và quan trọng nhất khắc phục Độ nhạy của Case mà jquery: chứa () được gửi cùng với:

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()

Hy vọng ai đó trong tương lai gần tìm thấy nó hữu ích.

Câu trả lời của Rocket không hoạt động.

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

Tôi chỉ cần sửa đổi DEMO của anh ấy ở đây và bạn có thể thấy DOM gốc được chọn.

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

thêm bộ chọn " : last " trong mã để sửa lỗi này.

Cách tốt nhất theo ý kiến ​​của tôi.

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

Có, sử dụng containsbộ chọn jQuery .

JQuery sau đây chọn các nút div có chứa văn bản nhưng không có con, đó là các nút lá của cây 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>