creating a json object on clicking a link

Question

I am trying to create a json object using the text inside element, so that, I can sessionStorage them and use them in another

                            <div class="single-product mb-60">
                                <div class="product-img">
                                    <img src="assets/img/categori/product1.png" alt="" class='apparel_img'>
                                    <div class="new-product">
                                        <span>New</span>
                                    </div>
                                </div>
                                <div class="product-caption">
                                    <div class="product-ratting">
                                        <i class="far fa-star"></i>
                                        <i class="far fa-star"></i>
                                        <i class="far fa-star"></i>
                                        <i class="far fa-star low-star"></i>
                                        <i class="far fa-star low-star"></i>
                                    </div>
                                    <h4><a href="#" class='apparel'>Green Dress with details</a></h4>
                                    <div class="price">
                                        <ul>
                                            <li class='price'>$40.00</li>
                                            <li class="discount">$60.00</li>
                                        </ul>
                                    </div>
                                </div>
                                <div>
                                    <a href="#" onclick="myfunc()">Add to cart</a>
                            </div>

This is the html. I want to make a json file that look like this

var my_product = {
"img" : img_src,
"product_name" : text_inside_first_a_link,
"cost" : first_list_item_under_ul
}

After I take this inside this object I will sessionStorage them for different page to use it and add them to the cart using html and appendChild

sessionStorage.setItem("product_detail", my_product);

Edit: I have added classes to the elements that I need to extract the information from

function myfunc(){
    var $items = $('.apparel, .price')
    var obj = {}
    $items.each(function() {
        obj[this.className] = $(this).text()
})

$('body').append('<br><pre>'+JSON.stringify(obj, null, ' '))}

I tried this with two classes only but doesn't work. It returns an empty object

Answer 1

You can pass this inside your function and using this you can use closest() to get single-product div then just use find() to get required values .

Demo Code :

function myfunc(el) {
//get closest div
  var selctor = $(el).closest('div.single-product');
  var obj = {}
  //get datas
     obj["img"] = selctor.find('img').attr('src'),
    obj["product_name"] = selctor.find(".product-caption a").text(),
    obj["cost"] = selctor.find(".price ul li:first").text()

  console.log(obj)
  //store in session
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="single-product mb-60">
  <div class="product-img">
    <img src="assets/img/categori/product1.png" alt="">
    <div class="new-product">
      <span>New</span>
    </div>
  </div>
  <div class="product-caption">
    <div class="product-ratting">
      <i class="far fa-star"></i>
      <i class="far fa-star"></i>
      <i class="far fa-star"></i>
      <i class="far fa-star low-star"></i>
      <i class="far fa-star low-star"></i>
    </div>
    <h4><a href="#">Green Dress with details</a></h4>
    <div class="price">
      <ul>
        <li>$40.00</li>
        <li class="discount">$60.00</li>
      </ul>
    </div>
  </div>
  <div>
    <!--pass this in function-->
    <a href="#" onclick="myfunc(this)">Add to cart</a>
  </div>