CODEWITHSUNDEEP
javascriptjquery
Awais Ahmad
Awais Ahmad

Reputation: 3

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

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.

Upvotes: 0

Views: 724

Answers (2)

Ahrimann Steiner
Ahrimann Steiner

Reputation: 1314

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);
});

Upvotes: 0

charlietfl
charlietfl

Reputation: 171669

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>

Upvotes: 1

Related Questions