将数据库中的字符串包装到跨度中不起作用

Question

I need to wrap first and last string that represent title and price of a product of a div with a span tag.我需要用 span 标签包装代表产品标题和价格的第一个和最后一个字符串。 This strings are taken from database and varies between products.此字符串取自数据库并且因产品而异。 I trying to using wrap method on element but nothing change.我尝试在元素上使用 wrap 方法但没有任何改变。

Is there any way to solve this issue.有什么办法可以解决这个问题。

HTML 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) jQuery（包装第一个元素）

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>")

Answer 1

I think you would need to wrap the textNode rather than just the text:我认为您需要包装 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 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)如果要包装第一个和最后一个字符串，请删除.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>

Answer 2

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.如果您发现任何问题，请检查并告诉我。

Answer 3

<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>

将数据库中的字符串包装到跨度中不起作用

问题描述

3 个解决方案

解决方案1
1 已采纳 2022-11-15 11:33:17

解决方案2
0 2022-11-15 11:45:48

解决方案3
0 2022-11-15 12:16:23

将数据库中的字符串包装到跨度中不起作用

问题描述

3 个解决方案

解决方案1 1 已采纳 2022-11-15 11:33:17

解决方案2 0 2022-11-15 11:45:48

解决方案3 0 2022-11-15 12:16:23

解决方案1
1 已采纳 2022-11-15 11:33:17

解决方案2
0 2022-11-15 11:45:48

解决方案3
0 2022-11-15 12:16:23