विशिष्ट शब्द

Question

के आसपास टैग को बंद करें और फिर से खोलें मुझे "हैलो" शब्द से पहले <span> टैग बंद करने की आवश्यकता है और बटन क्लिक होने के बाद इसे फिर से खोलना होगा।

<span class="border"> 
    border Hello border border 
</span> 
<div> 
    <span class="button">Style me !</span> 
</div> 

jQuery:

यहाँ एक Fiddle

यह मेरा कोड है

$('.button').click(function() { 
    $('.border').each(function() { 
     var t = $(this).text(); 
     var s = t.split('Hello').join('</span>Hello<span class="border">'); 
     $(this).html(s) 
    }); 
}); 

HTML आउटपुट .button क्लिक करने के बाद मेरे पास है:

<span class="border"> 
    border Hello<span class="border"> border border 
</span> 

और उत्पादन मैं चाहता है:

<span class="border"> 
    border </span>Hello<span class="border"> border border 
</span> 

क्यों .join समारोह </span> अंतिम टैग डालने नहीं है?

Answer 1

आप एक स्ट्रिंग की तरह डोम संरचना को संशोधित कर सकते हैं, लेकिन आप पेरेंट तत्व को लक्षित करने के रूप में आप आंशिक तत्वों

$('.button').click(function() { 
    $('.border').each(function() { 
     var t = $(this).parent().html(); 
     var s = t.split('Hello').join('</span>Hello<span class="border">'); 
     $(this).parent().html(s) 
    }); 
}); 

FIDDLE सम्मिलित नहीं कर सकते होगा

ध्यान दें कि यह उदाहरण के साथ काम करता है, लेकिन यदि माता-पिता के पास अन्य तत्व भी हैं, तो यह समस्याएं पैदा कर सकता है, और मैं दृढ़ता से सुझाव दूंगा एक और तरीका inding परिणाम आप बीच आदि में बंद करने और खोलने तत्वों के अलावा अन्य की तलाश कर रहे प्राप्त करने के लिए

संपादित करें:

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

$('.button').click(function() { 
    $('.border').each(function() { 
     this.outerHTML = this.outerHTML.split('Hello').join('</span>Hello<span class="border">'); 
    }); 
}); 

FIDDLE

या का हिस्सा हैं भी neater jQuery संस्करण

$('.button').click(function() { 
    $('.border').prop('outerHTML', function(_, html) { 
     return html.split('Hello').join('</span>Hello<span class="border">'); 
    }); 
}); 

FIDDLE

Answer 2

आप स्ट्रिंग जैसे डोम संरचना को संशोधित नहीं कर सकते हैं।

$('.button').click(function() { 
    $('.border').replaceWith(function() { 
     var parts = $(this).text().split('Hello'); 
     return '<span class="border">' + parts.join('</span>Hello<span class="border">') + '</span>'; 
    }); 
}); 

डेमो: Fiddle

Answer 3

आप अपनी स्ट्रिंग के साथ "हैलो" शब्द को प्रतिस्थापित कर सकते हैं, जिसे आप

$('.button').click(function() { 
     $('.border').each(function() { 
      var t = $(this).text(); 
      var s = t.replace('Hello', '</span>Hello<span class="border">'); 
      $(this).html(s) 
     }); 
    });