पाठ द्वारा लिंक का चयन करें (सटीक मिलान)


89

JQuery का उपयोग करते हुए, मैं एक ऐसे लिंक का चयन करना चाहता हूं जिसमें बिल्कुल किसी प्रकार का पाठ हो। उदाहरण के लिए:

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

मैंने यह कोशिश की है:

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

लेकिन यह पहले और दूसरे लिंक को चुनता है। मैं सिर्फ पहला लिंक चाहता हूं, जिसमें "यह एक" शामिल है। मैं उसे कैसे कर सकता हूँ?


जवाबों:


138

तुम यह केर सकते हो:

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

संदर्भ: http://api.jquery.com/filter/


5
या तो इस मामले में काम करेगा, लेकिन मैं === का उपयोग करना चाहता हूं क्योंकि यह मूल्य और प्रकार पर मेल खाता है, अर्थात यह प्रकारों के साथ ज़बरदस्ती नहीं करेगा। stackoverflow.com/questions/359494/…
FishBasketGordo

1
तुम चूक गए return। मुझे इसे बदलना होगाfunction(index) { return (this.text === 'This One') }
एंडी तजहोनो

इसके अतिरिक्त, आप पाठ की लंबाई की जांच कर सकते हैं।
बेस्टिनमीर

39

मेरा एक सहकर्मी ऐसा करने के लिए एक समारोह के साथ jQuery का विस्तार किया:

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

परिणाम यह है कि आप इस तरह सटीक पाठ द्वारा कुछ का चयन कर सकते हैं:

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

यह आसान बनाता है, क्योंकि आपको हर बार सटीक वाक्यविन्यास याद नहीं करना पड़ता है। उनकी पूरी पोस्ट यहाँ है: सटीक पाठ द्वारा तत्वों के चयन के लिए jQuery के कस्टम चयनकर्ता: textEquals


28

FishBasketGordo के उत्तर पर विस्तार करने के लिए। यदि आप तत्वों की एक बड़ी मात्रा पर चयन करने की कोशिश कर रहे हैं, तो :contains()पहले संकीर्ण करने के लिए उपयोग करें और फिर फ़िल्टर लागू करें।

यह समग्र गति में सुधार करेगा:

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

गति / दक्षता के लिए वोट किया गया। इसके अलावा, .filter (।) के भीतर $ .trim () रिक्त स्थान की आवश्यकता से बचा जाता है।
जोपीसी

8

नरीमन के समाधान को संशोधित करना था:

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

अन्यथा क्रोम (लिनक्स) पर काम नहीं किया


6

मैं एक्सटेंशन का इस्तेमाल कर रहा था

$.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');

यदि कोई व्यक्ति इसमें भाग लेता है, तो बस साझा करना चाहता था (,


3

तो नरियन का जवाब बहुत अच्छा काम करता है। जंगली में इसका उपयोग करते हुए, हालांकि, मैं कुछ मुद्दों में भाग गया, जहां चीजें जो मुझे मिलने की उम्मीद थी, वे नहीं मिल रही थीं। ऐसा इसलिए था क्योंकि कभी-कभी तत्व के पाठ के आसपास यादृच्छिक सफेद स्थान होता है। यह मेरा विश्वास है कि यदि आप "हैलो वर्ल्ड" की खोज कर रहे हैं, तो आप फिर भी "हैलो वर्ल्ड", या "हैलो वर्ल्ड \ n" से मिलान करना चाहेंगे। इस प्रकार, मैंने फ़ंक्शन में "ट्रिम ()" विधि को जोड़ा, जो आसपास के व्हाट्सएप को हटा देता है, और यह बेहतर काम करना शुरू कर देता है। इसके अलावा, मैंने अपने मन को थोड़ा साफ करने के लिए चर नामों को संशोधित किया।

विशेष रूप से ...

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

और माध्यमिक नोट ... ट्रिम केवल खोजे गए पाठ से पहले और बाद में व्हाट्सएप को हटा देता है। यह शब्दों के बीच में व्हाट्सएप को नहीं हटाता है। मेरा मानना ​​है कि यह वांछनीय व्यवहार है, लेकिन आप इसे बदल सकते हैं यदि आप चाहते थे।


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

मुझे ऐसा लगता है कि मैं फ़िल्टर करने के लिए हर किसी के उत्तर के आधार पर कुछ याद कर रहा हूं, लेकिन उन तत्वों के सरणी के भीतर पहले आइटम का चयन क्यों नहीं किया है जो 'शामिल' हैं?

यह तभी काम करता है, जब आप जानते हैं कि पहले लिंक में आपके द्वारा खोजे जा रहे सटीक मिलान हैं। अन्य उत्तर बेहतर काम करते हैं, यदि आप सुनिश्चित नहीं हैं कि लिंक किस क्रम में होंगे।


क्योंकि वह हमेशा यह नहीं जानता कि वह जो चाहता है वह पहला है
कैमरन

प्रश्न विशेष रूप से पूछता है "मैं सिर्फ पहला लिंक चाहता हूं"।
माइकल खलीली 16

प्रश्न सटीक मिलान के लिए पूछता है, लेखक पहले तत्व को इंगित करने के लिए बताता है कि कौन सा तत्व चाहता है।
ड्लोपेज़गोनज़ेलीज़

2

ड्रॉप-डॉन से चयनित मान कैसे प्राप्त करें:

$.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")); - यह ड्रॉप-डाउन का मान लौटाएगा


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

1
कृपया आप उत्तर में स्पष्टीकरण जोड़ें।
माइकल पेरोलकोव्स्की

पहली पंक्ति उस पाठ के साथ किसी भी लिंक का चयन करने के लिए, दूसरी और तीसरी पंक्तियाँ आप उन्हें छिपाने के लिए लिंक के साथ क्या कर सकते हैं या jquery प्रलेखन api.jquery.com/filter
David Fawzy

@DavidFawzy - क्षमा करें, उम्म ... क्या ?? मुझे नहीं लगता कि ओपी के सवाल के साथ 2 या 3 लाइनों का कोई लेना देना है - यह सिर्फ भ्रम जोड़ता है।
jbyrd

2

क्षमा करें, यदि यह ठीक ऊपर किसी के उत्तर से मेल खाता है,

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

यहाँ लिंक्डइन खोज परिणाम पृष्ठ कंसोल में कुछ आउटपुट है।

$("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 मई, 2017): -

   $.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()
         }
      })
   }
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.