How to add/append html code in html elements with same class individually?

Question

Basically i m trying to use jquery to get content of one class and then appending the same data on some other place. There is multiple content with the same class name. I m gonna illustrate it with the help of image.

I was trying to achieve this by using jquery selectors but i m stuck on a point where i have to append different content in different elements with same class name. Let me explain by using animage(https://ibb.co/P1K2XWT). You can see 3 cards in this picture which are showing price, name and a button. I have to get that price and have to append under name(title). I got prices and names but i don't know how to go card by card and append each price under it.

var x =[];
$('.ld_course_grid_price').each(function(index, obj)
{
  x.push($(this).text());
});

console.log(x);

var y =[];
$('.entry-title').each(function(index, obj)
{
  y.push($(this).text());

});

Structure of HTML

<article id="post-479" class="thumbnail course post-479 sfwd-courses type-sfwd-courses status-publish has-post-thumbnail hentry ld_course_category-algebra-1 ast-article-single">
   <div class="ld_course_grid_price price_$">
      $70           
   </div>
   <a href="" rel="bookmark">
   <img width="270" height="226" src="" class="attachment-course-thumb size-course-thumb wp-post-image" alt="">         </a>
   <div class="caption">
      <h3 class="entry-title">Basic Algebra</h3>
      <p class="ld_course_grid_button"><a class="btn btn-primary" role="button" href="/courses/basic-algebra/" rel="bookmark">Enroll</a></p>
   </div>
   <!-- .entry-header -->
</article>

This is how i m getting prices. I have to display them under title.

Please reformulate your exact need (with text, this picture doesn't make much sense, at least to me). Where do you want the title and where do you want the price? — Jeto
– Jeto, Commented Apr 9, 2019 at 20:05
Do you not have control over the html? that is why you are using JQuery to move around html on client side? — Nawed Khan
– Nawed Khan, Commented Apr 9, 2019 at 20:07

charlietfl · Accepted Answer · 2019-04-09 20:14:59Z

1

You want to loop over the higher level repeating <article> then do whatever you need to within that element instance

$('article.sfwd-courses').each(function() {
  var $article = $(this),
    // look for what is needed in this article instance
    price = $article.find('.ld_course_grid_price').text(),
    title = $article.find('.entry-title').text();
  
  // do something with what you found
  var div = '<div style="color:red"> Title: ' + title + ', Price: ' + price + '</div>';
  $article.after(div);
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<article id="post-479" class="thumbnail course post-479 sfwd-courses type-sfwd-courses status-publish has-post-thumbnail hentry ld_course_category-algebra-1 ast-article-single">
  <div class="ld_course_grid_price price_$">
    $70
  </div>
  <a href="" rel="bookmark">
    <img width="270" height="226" src="" class="attachment-course-thumb size-course-thumb wp-post-image" alt=""> </a>
  <div class="caption">
    <h3 class="entry-title">Basic Algebra</h3>
    <p class="ld_course_grid_button"><a class="btn btn-primary" role="button" href="/courses/basic-algebra/" rel="bookmark">Enroll</a></p>
  </div>
  <!-- .entry-header -->
</article>

answered Apr 9, 2019 at 20:14

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Awais Ahmad Over a year ago

Check this ibb.co/P1K2XWT you will know what exactly i m trying to achieve

charlietfl Over a year ago

Ok so use what I provided and modify as needed

Awais Ahmad Over a year ago

i need to show PRICE after ` <div class="caption"> <h3 class="entry-title">Basic Algebra</h3>` as <h2></h2>. Getting data is not the issue

charlietfl Over a year ago

So change my <div> and insert after the entry-title instead. I already showed how to find() it

Awais Ahmad Over a year ago

it worked to.Thanks I appreciate your help Thanks Again :)

S Bonnet · Accepted Answer · 2019-04-09 20:30:19Z

0

Not sure wether you want to move the price or clone/copy it. My alternativ :

$('.course').each(function() {
   h3_title = $(this).find('.entry-title');
   div_price = $(this).find('.ld_course_grid_price');
   //price_txt = $(this).find('.ld_course_grid_price').text();
   div_price_clone = div_price.clone().removeClass();
   div_price_clone.insertAfter(h3_title);
});

edited Apr 9, 2019 at 20:30

answered Apr 9, 2019 at 20:25

S Bonnet

1,7221 gold badge13 silver badges34 bronze badges

Collectives™ on Stack Overflow

How to add/append html code in html elements with same class individually?

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related