jQuery: ค้นหาองค์ประกอบด้วยข้อความ

ใครสามารถบอกฉันว่ามันเป็นไปได้ที่จะหาองค์ประกอบตามเนื้อหามากกว่าidหรือชั้น ?

ฉันพยายามค้นหาองค์ประกอบที่ไม่มีคลาสหรือรหัสที่แตกต่างกัน (จากนั้นฉันต้องค้นหาผู้ปกครองขององค์ประกอบนั้น)

คุณสามารถใช้: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>

ในเอกสารประกอบ 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;
}

Fellas ฉันรู้ว่านี่เก่า แต่เดี๋ยวก่อนฉันมีวิธีแก้ปัญหานี้ซึ่งฉันคิดว่าทำงานได้ดีกว่าทั้งหมด ก่อนอื่นจะเอาชนะ Case Sensitivity ที่ jquery: contain () มาพร้อมกับ:

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

หวังว่าบางคนในอนาคตอันใกล้จะพบว่ามีประโยชน์

คำตอบของ Rocket ไม่ทำงาน

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

ฉันเพิ่งปรับเปลี่ยนDEMOของเขาที่นี่และคุณสามารถดู DOM ที่เลือกไว้

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

เพิ่มตัวเลือก" : สุดท้าย " ในรหัสเพื่อแก้ไขปัญหานี้

วิธีที่ดีที่สุดในความคิดของฉัน

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

ใช่ใช้containsตัวเลือกjQuery

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>