2013-08-06 7 views
9

शामिल का चयन करें तो मैं कुछ इस तरह है:केवल तत्वों जो सीधे पाठ

<div class="main"> 
    <div class="useless"> 
    text I don't want.  
    </div> 
    <div class="useless"> 
    text I don't want.  
    </div> 
    <div class="narrow"> 
    text I'm searching for 
    </div> 
    <div class="useless"> 
    text I don't want.  
    </div> 
    <div class="useless"> 
    text I don't want.  
    </div> 
</div> 

jQuery के सुंदर :contains selector का उपयोग करना, मैं एक कीवर्ड के लिए खोज कर सकते हैं, लेकिन यह दोनों माता पिता और बच्चे वापस आ जाएगी।

मैं चाहता हूं कि यह केवल उन तत्वों को लौटाएं जो सीधे उस शब्द को शामिल करते हैं जिसके लिए मैं खोज रहा हूं।

स्टैक ओवरफ्लो ने पिछले प्रयास के रूप में उपयोगी रूप से this link का सुझाव दिया है, लेकिन यह बहुत ही घबराहट लगता है क्योंकि यह सभी डोम नोड्स को क्रॉल कर रहा है और इसके लिए बहुत अस्पष्ट कोड की आवश्यकता है।

+3

इसे संदर्भित प्रश्न के डुप्ली के रूप में फ़्लैग करना होगा; जबकि मैं सराहना करता हूं कि आप वहां दिए गए कारणों से संतुष्ट नहीं हैं, आपके द्वारा दिए गए कारणों के लिए, यह अभी भी वही प्रश्न है और आपने अन्य प्रश्नों में दी गई कोई विशिष्ट आवश्यकता नहीं दी है। कार्रवाई के उचित पाठ्यक्रम शायद उस प्रश्न पर एक बक्षीस लगाएंगे, अगर एक बार ऐसा करने में सक्षम हो। मैं अभी भी इसके बारे में उत्सुक हूं और इसमें देख रहा हूं, हालांकि। –

+1

* "यह बहुत गुंजाइश लगता है क्योंकि यह सभी डोम नोड्स को क्रॉल कर रहा है" *। किसी भी मामले में आपको यही करना है। आप एक ही समय में '$ (' * ') 'के साथ सभी नोड्स का चयन कर सकते हैं और फिर उन पर फिर से चालू हो सकते हैं, लेकिन किसी भी मामले में, आपको सभी नोड्स को पार करना होगा। –

+0

शायद, आपको [jQuery XPath प्लगइन] (https://github.com/ilinsky/jquery-xpath) जैसे अधिक उन्नत चयनकर्ता की आवश्यकता है। यदि आप xpath का उपयोग करने का निर्णय लेते हैं, तो शायद [यह उत्तर] (http://stackoverflow.com/a/2994336/771578) आपकी भी मदद करेगा। –

उत्तर

8

यह स्क्रिप्ट सभी नोड्स कि एक विशिष्ट पाठ शामिल हैं। यह आपको पाठ (रेगेक्स इत्यादि) पर किसी भी स्ट्रिंग परीक्षण करने की अनुमति देगा।

function getNodesThatContain(text) { 
    var textNodes = $(document).find(":not(iframe, script, style)") 
     .contents().filter( 
      function() { 
      return this.nodeType == 3 
      && this.textContent.indexOf(text) > -1; 
    }); 
    return textNodes.parent(); 
}; 

console.log(getNodesThatContain("test")); 

यहाँ के परीक्षण के लिए एक बेला है: http://jsfiddle.net/85qEh/4/

पुनश्च - वृद्धि की गति एक अलग शीर्ष स्तर चयनकर्ता का उपयोग करें। उदाहरण के लिए यदि आपको केवल # कंटेनर के अंदर की आवश्यकता है तो आप var textNodes = $('#container')...

+0

बॉबेंस के समाधान से निश्चित रूप से अधिक पठनीय और संक्षिप्त। +1। निश्चित नहीं है कि प्रदर्शन की तुलना कैसे की जाएगी, हालांकि, इससे कोई फर्क नहीं पड़ता। –

+0

आपने जो उदाहरण दिखाया है, उसके साथ बस इसका परीक्षण किया है http://jsfiddle.net/85qEh/3/ आपके लिए परिणाम सेट Jquery de-dupes जैसा दिखता है। –

+0

हाँ, मैंने अभी कोशिश की और एक ही चीज़ - मेरी गलती मिली। इसके अलावा, क्षमा करें, मुझे यह समझने के बाद ही मेरी टिप्पणी से बिंदु को संपादित कर दिया गया है कि मैं त्रुटि में था और अब मुझे इसे संपादित करने में बहुत देर हो चुकी है, इसलिए आपकी टिप्पणी ऐसा लगता है कि आप किसी का जवाब नहीं दे रहे हैं। माफ़ कीजिये। : पी –

-2

जे एस में यह प्रयास करें

$('div >:contains("text Im searching for")') 
+5

डाउनवोट मेरा नहीं है, लेकिन ध्यान दें कि यह लिंक किए गए प्रश्न में उपलब्ध "छद्म" समाधान का हिस्सा है। –

+0

और बिंदु पर और, यह काम नहीं करता है, जैसा कि अन्य प्रश्नों पर टिप्पणियों में बताया गया है। -1 –

+0

अन्य लोगों ने जो मुद्दा खोजा है: http://jsfiddle.net/DM4vz/2/ यदि आप इसके ऊपर एक अभिभावक जोड़ते हैं, तो खोज विफल हो जाएगी। – RandallB

2

समाधान, जैसा कि ऊपर है, लेकिन एक उच्च माना नहीं समाधान जाहिरा तौर पर के रूप में संदर्भित है जो अन्य सवाल में प्रदान की जाती है, यह करने के लिए है:

$("div:contains('searching')").filter(function() { 
    return (
    $(this).clone() //clone the element 
    .children() //select all the children 
    .remove() //remove all the children 
    .end() //again go back to selected element 
    .filter(":contains('searching')").length > 0) 
}).css('border', 'solid 1px black'); 

मैं 'डीओएम नोड्स को क्रॉल करने के लिए एक बड़ी चीज़ लिखने से कम घबराहट जोड़ें, और वास्तव में कम जगहों पर कम स्थानों को प्रभावित करना चाहिए।

यदि किसी और के पास बेहतर विचार हैं, तो मुझे निश्चित रूप से रूचि है।

http://jsfiddle.net/TT7dR/42/

+0

यह हैकी और अक्षम है, लेकिन ऐसा लगता है कि यह काम करेगा (और टिप्पणियां इसके पीछे तर्क को स्पष्ट रूप से समझाती हैं)। एक टेंटेटिव +1, लेकिन * निश्चित रूप से * एक छोटा और साफ तरीका है? –

+2

लेकिन यहां अन्य divs भी सीमाबद्ध हैं। – WooCaSh

+1

JSFiddle विफल। मैंने गलती से पिछले लिंक का उपयोग किया जिसमें खराब मार्कअप था और सीधे सवाल से संबंधित नहीं था। मैंने इसे अपडेट किया, और अब यह बेहतर अंतर्दृष्टि प्रदान करता है। – RandallB

संबंधित मुद्दे