2017-12-21 113 views
7

क्या कोई मुझे ऐसा करने का सबसे अच्छा तरीका बता सकता है कि कुछ मार्गदर्शन दे सकता है।कुछ तत्व (जावास्क्रिप्ट या JQuery) के बाद टेक्स्ट प्राप्त करें

मैं सभी पाठ जिसके बाद है पाने के लिए कोशिश कर रहा हूँ "मुख्य"

मैं इस सरल हो सकता है, लेकिन यह सिर्फ क्रिसमस से पहले पूरे दिन मेरे मस्तिष्क में उठा रहा है। तो मैंने सोचा कि खुद को तनाव देने के बजाय, मैं कुछ मार्गदर्शन की तलाश करूंगा।

उदाहरण कोड केवल Text in P tag वापस लाता है, लेकिन मैं वापस लाने के लिए Text not in it's own element चाहते हैं और p tag

console.log($("#container").find(".main").next().text());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <div class="main"> WOOP IN MAIN </div> 
 
    Text not in it's own element 
 
    <p> Text in P tag </p> 
 
</div>

+0

क्या इस मामले में डीओएम अपरिवर्तनीय है? –

उत्तर

6

यह क्योंकि Text not in it's own element एक text नोड, इसलिए next()<p/> टैग को लक्ष्य बनाएगा किया जा रहा है कि यह एक HTMLElement है माना जाता है। आप nextSibling का एक संयोजन है, जो दो नोड प्रकार और nextElementSibling है, जो के रूप में यह विधि नाम का तात्पर्य है की नास्तिक है प्रयोग करेंगे आप स्थानीय होने के लिए थे, तो पकड़ लेता है अगले भाई तत्व:

const main = document.querySelector('.main'); 
 

 
const txt = [ 
 
    main.nextSibling.textContent.trim(), 
 
    main.nextElementSibling.textContent.trim() 
 
]; 
 

 
console.log(txt)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <div class="main"> WOOP IN MAIN </div> 
 
    Text not in it's own element 
 
    <p> Text in P tag </p> 
 
</div>

+1

आप 'const' का उपयोग क्यों कर रहे हैं? क्या यह 'var' नापसंद करने के लिए कुछ नया फैशन है? – vsync

+0

'var' का उपयोग करते समय आप अनचाहे hoisting और/या पुन: असाइनमेंट का जोखिम चलाते हैं। इस जावास्क्रिप्ट चर के शीर्ष पर गतिशील रूप से टाइप किया गया है, जो अनपेक्षित व्यवहार का भी कारण बन सकता है। लागू होने पर 'const' का उपयोग करना सबसे अच्छा अभ्यास है। 'Var' की ओर * नापसंद *। कम से कम अनुमान लगाने योग्य कोड रखने का मामला। –

+0

@CarlEdwards फिर आप पाठ को हटाने के लिए इसे कैसे अनुकूलित करेंगे? –

8

प्राप्त करने के लिए इस clone() कंटेनर के लिए सबसे आसान तरीका है, को दूर .main इससे तत्व, फिर text() प्राप्त करें, इस तरह:

var text = $("#container").clone().find('.main').remove().end().text(); 
 
console.log(text.trim());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <div class="main"> WOOP IN MAIN </div> 
 
    Text not in it's own element 
 
    <p> Text in P tag </p> 
 
</div>

आप वैकल्पिक रूप से रिकर्सिवली डोम नोड्स .main तत्व का पालन के माध्यम से पार कर सकता है, लेकिन यह और अधिक जटिल है और एक ही परिणाम देता है।

+0

तुमने मुझे डांट दिया मुझे ' –

+0

आप प्रतिभाशाली रोरी! :) मेरी मदद करने के लिए धन्यवाद। मैं क्रिसमस से पहले खुद को परेशान कर रहा था। –

+1

अच्छा समाधान, लेकिन ध्यान रखें कि जब आपके पास कंटेनर डिव में सामग्री है तो इससे पहले। यह भी दिखाया जाएगा। @ कार्ल एडवर्ड्स के जवाब में इस बाधा – BananasSplitter

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