我需要用 span 標簽包裝代表產品標題和價格的第一個和最后一個字串。此字串取自資料庫并且因產品而異。我嘗試在元素上使用 wrap 方法但沒有任何改變。
有什么辦法可以解決這個問題。
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（包裝第一個元素）
例如回傳標題
$(".product_desc").text().trim().split('\n')[0])
包裝不起作用
$($(".product_desc").text().trim().split('\n')[0]).wrap("<span class='hello'></span>")
uj5u.com熱心網友回復：
我認為您需要包裝 textNode 而不僅僅是文本：
顯示代碼片段
$('.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 ></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>如果你想包裝第一個和最后一個字串，然后洗掉.eq(0)
每條評論更新：
$('.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 ></span>'); // first text node is the title
$contents.last().wrap('<span ></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>uj5u.com熱心網友回復：
請檢查以下代碼：
$('.product_desc').each(function(i, v) {
$(v).contents().eq(0).wrap('<span />');
$(v).contents().eq(6).wrap('<span />');
});
我有合并標題和價格。如果您發現任何問題，請檢查并告訴我。
uj5u.com熱心網友回復：
<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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/533636.html