Elements को Wrap और Unwrap करना
In this page:
$(selector).wrap("<wrapper></wrapper>");
$(selector).unwrap();
$(selector).wrapAll("<wrapper></wrapper>");wrap()
wrap() method current selection के हर element के चारों ओर individually दी गई HTML structure की एक copy insert करता है। अगर आप तीन elements wrap करते हैं, तो हर एक को अपना अलग wrapper मिलता है, एक shared wrapper नहीं।
उदाहरण: wrap()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
.box { border: 2px solid #333; padding: 8px; margin: 4px 0; }
</style>
</head>
<body>
<p class="item">One</p><p class="item">Two</p>
<script>
$(".item").wrap("<div class='box'></div>");
</script>
</body>
</html>wrapAll()
wrapAll() सभी selected elements को हर एक को अपना wrapper देने के बजाय एक single shared wrapper के अंदर रखता है। यह तब उपयोगी है जब elements के एक group को एक unit की तरह treat करना हो, जैसे एक single row container में wrap की गई कई columns।
उदाहरण: wrapAll()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
.group { border: 2px solid #333; padding: 8px; }
</style>
</head>
<body>
<p class="item">One</p><p class="item">Two</p>
<script>
$(".item").wrapAll("<div class='group'></div>");
</script>
</body>
</html>wrapInner()
wrapInner() खुद element को wrap करने के बजाय हर selected element के अंदर के contents को wrap करता है। element अपनी original position बनाए रखता है, लेकिन उसके ठीक अंदर, उसके मौजूदा children के चारों ओर एक नया wrapper दिखता है।
उदाहरण: wrapInner()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="box">Content</div>
<script>
$("#box").wrapInner("<em></em>");
</script>
</body>
</html>unwrap()
unwrap() selected elements को खुद अपनी जगह रखते हुए किसी element के immediate parent को हटा देता है। यह effectively wrap() का उल्टा है, किसी अब चाहिए न होने वाले wrapper को undo करने के लिए उपयोगी।
उदाहरण: unwrap()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div class="box"><p id="text">Content</p></div>
<script>
$("#text").unwrap();
</script>
</body>
</html>कई Items को Wrap करना
Wrapping elements को एक नई structure में group करने के लिए उपयोगी है, जैसे styling के लिए form fields के एक set को एक fieldset-जैसे container में wrap करना। क्योंकि wrap() प्रति-element operate करता है, यह सही tool है जब हर item को अपना independent wrapper चाहिए।
उदाहरण: Wrapping Multiple Items
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<input name="first"><input name="last">
<script>
$("input").wrapAll("<fieldset></fieldset>");
</script>
</body>
</html>- जब आपको एक shared container चाहिए हो तब
.wrap()इस्तेमाल करना, इसलिए हर element को अपना wrapper मिलता है और इसके बजाय.wrapAll()चाहिए। - बिना closing tag वाला एक wrapper pass करना, जैसे
.wrap("<div class=box>"), जो शायद आपकी उम्मीद वाली structure न बनाए। .wrap()को.wrapInner()के साथ confuse करना, इसलिए खुद element wrap हो जाता है उसके contents के बजाय।
Chapter Quiz — Complete all 9 topics to unlock
0/9 topics done
Complete these topics first: