Question 35977 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

wrap string from database into span not work – Jquery

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

3

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
  3. 0 
    <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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search