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

0
votes

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.

2
javascriptjquery
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
Do you not have control over the html? that is why you are using JQuery to move around html on client side? – Nawed Khan
i don't have any control on design – Awais Ahmad
i was thinking may be could do something using $(this) – Awais Ahmad
@Jeto ibb.co/P1K2XWT – Awais Ahmad

2 Answers

1
votes

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

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