wrap string from database into span not work
Question
I need to wrap first and last string that represent title and price of a product of a div with a span tag. This strings are taken from database and varies between products. I trying to using wrap method on element but nothing change.
Is there any way to solve this issue.
HTML
<div class="product_desc">
Some Bracelet title
<p><span class=""> Material:</span> <span class=""> 926 Silver</span></p>
<p><span class=""> Chain length:</span> <span class=""> 21 cm</span></p>
<p><span class=""></span></p>
Price: €85.37
</div>
jQuery (to wrap first element)
Return the title for example
$(".product_desc").text().trim().split('\n')[0])
Wrap not work
$($(".product_desc").text().trim().split('\n')[0]).wrap("<span class='hello'></span>")
3 answers
solution1
1 ACCPTED 2022-11-15 11:33:17
I think you would need to wrap the textNode rather than just the text:
$('.product_desc').contents() // get the contents.filter((index, element) => element.nodeType === 3 && element.data.trim().length > 0) // filter out text nodes.eq(0) // get the first text node - if you also want to wrap the last textnode, remove this line.wrap('<span class="hello"></span>'); // wrap it
.hello { color: red; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="product_desc"> Some Bracelet title <p><span class=""> Material:</span> <span class=""> 926 Silver</span></p> <p><span class=""> Chain length:</span> <span class=""> 21 cm</span></p> <p><span class=""></span></p> Price: €85.37 </div>
If you want to wrap both the first and last string, then remove the .eq(0)
Update per comment:
$('.product_desc').each((index, container) => { // added loop so you do this to each product description const $contents = $(container).contents().filter((filterIndex, element) => element.nodeType === 3 && element.data.trim().length > 0); // got contents $contents.first().wrap('<span class="title"></span>'); // first text node is the title $contents.last().wrap('<span class="price"></span>'); // last text node is the price })
.title { color: red; }.price { color: blue; }.product_desc:nth-child(even).title { color: green; }.product_desc:nth-child(even).price { color: orange; }.container { display: flex; }.product_desc { margin-right: 2rem; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div class="product_desc"> Some Bracelet title <p><span class=""> Material:</span> <span class=""> 926 Silver</span></p> <p><span class=""> Chain length:</span> <span class=""> 21 cm</span></p> <p><span class=""></span></p> Price: €85.37 </div> <div class="product_desc"> Some Bracelet title <p><span class=""> Material:</span> <span class=""> 926 Silver</span></p> <p><span class=""> Chain length:</span> <span class=""> 21 cm</span></p> <p><span class=""></span></p> Price: €85.37 </div> <div class="product_desc"> Some Bracelet title <p><span class=""> Material:</span> <span class=""> 926 Silver</span></p> <p><span class=""> Chain length:</span> <span class=""> 21 cm</span></p> <p><span class=""></span></p> Price: €85.37 </div> </div>
solution2
0 2022-11-15 11:45:48
Please check below code:
$('.product_desc').each(function(i, v) {
$(v).contents().eq(0).wrap('<span class="title"/>');
$(v).contents().eq(6).wrap('<span class="price"/>');
});
I have merge title and price. Please check and let me know if you find any issues.
solution3
0 2022-11-15 12:16:23
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
let dv = document.getElementsByClassName("product_desc")[0];
$(dv.firstChild).wrap("<span class='title'></span>");
$(dv.lastChild).wrap("<span class='price'></span>");
console.log(dv)
});
</script>
</head>
<body>
<div class="product_desc">
Some Bracelet title
<p><span class=""> Material:</span> <span class=""> 926 Silver</span></p>
<p><span class=""> Chain length:</span> <span class=""> 21 cm</span></p>
<p><span class=""></span></p>
Price: €85.37
</div>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to wrap in span last three words from string / heading
Wrap rest of the string with span tag from the second occurrence
Find the string occurence and wrap it with a span
JQuery wrap each word of string in span if it is not wrapped
wrap dynamic insensitive string in span tag
How to wrap a span around the ‘PM’ and ‘AM’ in a string?
Wrap sub-string with <span> tag (with nesting)
How to remove html tags (span) wrap only with specific class name and without inner content from a string?
Find words from a list and wrap each in a span?
Wrap index of character in string in span tag with class javascript
Related Tags