เลือกลิงค์ตามข้อความ (ตรงกันทุกประการ)

ใช้ jQuery ฉันต้องการเลือกลิงค์ที่มีข้อความบางประเภท ตัวอย่างเช่น:

<p><a>This One</a></p>
<p><a>"This One?"</a></p>
<p><a>Unlikely</a></p>

ฉันได้ลองสิ่งนี้:

$('a:contains("This One")')

แต่จะเลือกลิงค์แรกและลิงค์ที่สอง ฉันต้องการเพียงลิงก์แรกซึ่งมี "อันนี้" ทั้งหมด ฉันจะทำเช่นนั้นได้อย่างไร?

คุณสามารถทำได้:

$('a').filter(function(index) { return $(this).text() === "This One"; });

อ้างอิง: http://api.jquery.com/filter/

เพื่อนร่วมงานของฉันขยาย jQuery พร้อมฟังก์ชั่นในการทำสิ่งนี้:

$.expr[':'].textEquals = function(a, i, m) {
    return $(a).text().match("^" + m[3] + "$");
};

ผลที่ได้คือคุณสามารถเลือกบางอย่างด้วยข้อความที่แน่นอนด้วยวิธีนี้:

$("label:textEquals('Exact Text to Match')");

สิ่งนี้ทำให้ง่ายเนื่องจากคุณไม่จำเป็นต้องจำไวยากรณ์ที่แน่นอนในแต่ละครั้ง โพสต์ทั้งหมดของเขาอยู่ที่นี่: jQuery Custom Selector สำหรับเลือกองค์ประกอบตามข้อความที่แน่นอน: textEquals

เพื่อขยายคำตอบของ FishBasketGordo หากคุณกำลังพยายามทำการเลือกองค์ประกอบจำนวนมากให้ใช้:contains()ก่อนเพื่อ จำกัด ขอบเขตให้แคบลงแล้วจึงใช้ตัวกรอง

สิ่งนี้จะปรับปรุงความเร็วโดยรวม:

$('a:contains("This One")').filter(function(index)
{
    return $(this).text() === "This One";
});

ต้องแก้ไขโซลูชันของ Nariman ให้เป็น:

$.expr[':'].textEquals = function(a, i, m) {
    var match = $(a).text().match("^" + m[3] + "$")
    return match && match.length > 0;                                                                                                                                                                                                                                            
}

มิฉะนั้นจะไม่ทำงานบน chrome (Linux)

ฉันใช้นามสกุล

$.expr[':'].textEquals

แต่ฉันพบว่าการติดตั้งใช้งานกับ jQuery 1.7 ไม่ได้อีกต่อไป (เห็นได้ชัดว่ามีการเปลี่ยนแปลงใน Sizzla.filter) หลังจากดิ้นรนมาระยะหนึ่งเพื่อให้มันใช้งานได้ฉันก็เขียนปลั๊กอิน jQuery เพื่อทำสิ่งเดียวกันให้สำเร็จ

$.fn.textEquals = function (text) {
    var match = false;
    $(this).each(function () {
        if ($(this).text().match("^" + escapeRegex(text) + "$")) {
            match = true;
            return false;
        }
    });
    return match;
};

ใช้:

$(".ui-autocomplete li").textEquals('Exact Text to Match');

แค่อยากแชร์เผื่อว่ามีคนอื่นเจอ (,

ดังนั้นคำตอบของ Narnian ก็ใช้ได้ดี อย่างไรก็ตามการใช้มันในป่าฉันพบปัญหาบางอย่างซึ่งสิ่งที่ฉันคาดหวังว่าจะได้พบนั้นไม่พบ เนื่องจากบางครั้งมีพื้นที่สีขาวแบบสุ่มล้อมรอบข้อความขององค์ประกอบ ฉันเชื่อว่าหากคุณกำลังค้นหา "Hello World" คุณก็ยังคงต้องการให้ตรงกับ "Hello World" หรือแม้แต่ "Hello World \ n" ดังนั้นฉันจึงเพิ่มเมธอด "trim ()" ลงในฟังก์ชันซึ่งจะลบช่องว่างรอบ ๆ ออกไปและมันก็เริ่มทำงานได้ดีขึ้น นอกจากนี้ฉันยังแก้ไขชื่อตัวแปรให้ชัดเจนขึ้นเล็กน้อยในใจ

โดยเฉพาะ ...

$.expr[':'].textEquals = function(el, i, m) {
    var searchText = m[3];
    var match = $(el).text().trim().match("^" + searchText + "$")
    return match && match.length > 0;
}

และบันทึกรอง ... การตัดแต่งจะลบเฉพาะช่องว่างก่อนและหลังข้อความที่ค้นหาเท่านั้น ไม่ได้ลบช่องว่างกลางคำ ฉันเชื่อว่านี่เป็นพฤติกรรมที่พึงปรารถนา แต่คุณสามารถเปลี่ยนแปลงได้หากต้องการ

$('a:contains("This One")')[0];

ฉันรู้สึกว่าตัวเองขาดอะไรบางอย่างตามคำตอบของคนอื่นในการกรอง แต่ทำไมไม่เลือกรายการแรกภายในอาร์เรย์ขององค์ประกอบที่ส่งคืนโดย "มี"

วิธีนี้ใช้ได้ผลก็ต่อเมื่อคุณรู้ว่าลิงก์แรกตรงกับที่คุณต้องการ คำตอบอื่น ๆ ได้ผลดีกว่าหากคุณไม่แน่ใจว่าลิงก์จะอยู่ในลำดับใด

วิธีรับค่าที่เลือกจาก drop-dwon:

$.fn.textEquals = function (text) {
    var match = false; 
    var values="";
    $(this).each(function () {
        if ($(this).text().match("^" + text + "$")) {
            values=$(this).val();
            match = true;
            return false;
        }
    });
    return values;
};

console.log($("option").textEquals("Option One")); - จะคืนค่าของรายการแบบเลื่อนลง

var link = $('a').filter(function(index) { return $(this).text() === "Availability"; });
 $(link).hide();
        $(link).removeAttr('href');

ขออภัยหากตรงกับคำตอบของทุกคนด้านบน

   $.fn.equalsText = function (text, isCaseSensitive) {
      return $(this).filter(function () {
         if (isCaseSensitive) {
            return $(this).text() === text
         } else {
            return $(this).text().toLowerCase() === text.toLowerCase()
         }
      })
   }

นี่คือผลลัพธ์บางส่วนในคอนโซลหน้าผลการค้นหา Linkedin

$("li").equalsText("Next >", false)
[<li class=​"next">​…​</li>​] // Output

$("li").equalsText("next >", false)
[<li class=​"next">​…​</li>​] // Output

$("li").equalsText("Next >", true)
[<li class=​"next">​…​</li>​] // Output

$("li").equalsText("next >", true)
[] // Output

มีการรองรับกรณีไวและไม่ได้ใช้งาน :contains()

แก้ไข (22 พฤษภาคม 2560): -

   $.fn.equalsText = function (textOrRegex, isCaseSensitive) {
      return $(this).filter(function () {
         var val = $(this).text() || this.nodeValue
         if (textOrRegex instanceof RegExp) {
            return textOrRegex.test(val)
         } else if (isCaseSensitive) {
            return val === textOrRegex
         } else {
            return val.toLowerCase() === textOrRegex.toLowerCase()
         }
      })
   }