wrap string from database into span not work-CodePudding

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 > 
  Some Bracelet title 
  <p><span > Material:</span> <span > 926 Silver</span></p>
  <p><span > Chain length:</span> <span > 21 cm</span></p>
  <p><span ></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>")

CodePudding user response：

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 ></span>');                                                 // wrap it

.hello {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >

  Some Bracelet title

  <p><span > Material:</span> <span > 926 Silver</span></p>

  <p><span > Chain length:</span> <span > 21 cm</span></p>

  <p><span ></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 ></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 >
  <div >
    Some Bracelet title
    <p><span > Material:</span> <span > 926 Silver</span></p>
    <p><span > Chain length:</span> <span > 21 cm</span></p>
    <p><span ></span></p>
    Price: €85.37
  </div>
  <div >
    Some Bracelet title
    <p><span > Material:</span> <span > 926 Silver</span></p>
    <p><span > Chain length:</span> <span > 21 cm</span></p>
    <p><span ></span></p>
    Price: €85.37
  </div>
  <div >
    Some Bracelet title
    <p><span > Material:</span> <span > 926 Silver</span></p>
    <p><span > Chain length:</span> <span > 21 cm</span></p>
    <p><span ></span></p>
    Price: €85.37
  </div>
</div>

CodePudding user response：

Please check below code:

$('.product_desc').each(function(i, v) {
$(v).contents().eq(0).wrap('<span />');
$(v).contents().eq(6).wrap('<span />');
});

I have merge title and price. Please check and let me know if you find any issues.

CodePudding user response：

<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 >
    Some Bracelet title
    <p><span > Material:</span> <span > 926 Silver</span></p>
    <p><span > Chain length:</span> <span > 21 cm</span></p>
    <p><span ></span></p>
    Price: €85.37
  </div>
</body>
</html>