jQuery: पाठ द्वारा तत्व खोजें

Question

क्या कोई मुझे बता सकता है कि क्या आईडी या क्लास के बजाय इसकी सामग्री के आधार पर कोई तत्व ढूंढना संभव है ?

मैं ऐसे तत्वों को खोजने का प्रयास कर रहा हूं जिनमें अलग-अलग कक्षाएं या आईडी नहीं हैं। (तब मुझे उस तत्व के माता-पिता को खोजने की जरूरत है।)

Comments

api.jquery.com/category/selectors

— फेलिक्स क्लिंग

संभावित डुप्लिकेट कैसे मैं एक विशेष पाठ मान युक्त एक स्पैन का चयन कर सकता हूं, jquery का उपयोग करके?

— प्योरफ्रेट

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>

Comments

महान, लेकिन यह संवेदनशील मामला है। क्या वैसे भी हम एक मामले को असंवेदनशील खोज कर सकते हैं?

— दीपू राज

@DipuRaj: आपको .filterइसके बजाय उपयोग करना होगा। $('div').filter(function(){ return $(this).text().toLowerCase() === 'test';})

— रॉकेट हज़मत

हां, कृपया appraoch @RocketHazmat उपयोग का उपयोग करें, कहते हैं कि आपके पास 'रजिस्टर अनुबंध' के साथ सभी उपसर्ग हैं और प्रत्येक में एक संख्या प्रत्यय है। आप उन सभी का चयन करते हुए समाप्त हो जाएंगे , जब वास्तव में आप केवल पाठ के साथ तत्व चाहते हैं: 'पंजीकरण अनुबंध 26' ।

— फेंग ह्यूओ

हालाँकि: इसमें मामला संवेदनशील है, इसने मेरे लिए काम किया क्योंकि मैंने खोजने के लिए सटीक पाठ स्ट्रिंग पारित किया।

— फ्रांसिस्को क्विंटो

मामले में यह किसी और की मदद करता है जो अपने पार्न्स में रिक्त स्थान का उपयोग करना पसंद करता है, निम्नलिखित काम नहीं करता है:$('div:contains( "test" )').css('background-color', 'red');

— एम काट्ज़

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

Comments

बस इस सटीक समस्या में भाग गया। यह अधिक होना चाहिए।

— डिकीबॉय

यह समाधान निम्नलिखित परिदृश्य में विफल हो सकता है <li>Hello <a href='#'>World</a>, How Are You. :। यहाँ अगर Howखोज की जा रही है तो हालत मेरे ख्याल से असफल हो जाएगी।

— me_digvijay 18

Answer 3

फेलास, मुझे पता है कि यह पुराना है लेकिन हे मेरे पास यह समाधान है जो मुझे लगता है कि सभी से बेहतर काम करता है। सबसे पहले और सबसे महत्वपूर्ण केस संवेदनशीलता पर काबू पाया जाता है कि इसमें शामिल हैं: () के साथ भेज दिया गया है:

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 को यहाँ संशोधित किया है और आप देख सकते हैं कि मूल DOM चयनित है।

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

इसे ठीक करने के लिए कोड में " : अंतिम " चयनकर्ता जोड़ें ।

Comments

यह सबसे अच्छा काम करता है जब चयनकर्ता कई परिणाम देता है और आपको इसे एक विशिष्ट तत्व तक सीमित करना होगा जहां आपके पास संदर्भ के लिए कोई "आईडी" विशेषता नहीं है।

— ताहिर खालिद

Answer 5

मेरी राय में सबसे अच्छा तरीका है।

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

Answer 6

हाँ, jQuery containsचयनकर्ता का उपयोग करें ।

Comments

एर, नो नॉट: 'सम्‍मिलित:' सटीक मिलान नहीं करता है, केवल यह है कि क्या सुई (इसलिए नाम) हिस्टैक में निहित है ... जैसा कि अन्य लोगों ने यहां कहा है

— माइक कृंतक

यह कोई उत्तर नहीं है।

— लार्बी

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>

Comments

यह सबसे अच्छा जवाब है!

— कैल्सियोल