get class using jquery

Question

When I click increment button I need to get content from class="product-name" and class="amount". It's a dynamic website the list item show dynamically. Please help me using $(this) function. When I click, I only need content from inside of this list item classes class="product-name" and class="amount".

<li class="product-list-item">
  <div class="product-entry clearfix">
    <div class="thumb-price col-xs-5 col-md-5 col-lg-4">
      <div class="product-thumbnail">
        <img class="retina" src="images/shop/s-3.jpg" alt="food">
      </div>
      <div class="price">
        <span class="amount">$11</span>
      </div>
    </div>
    <div class="list-product-content col-xs-7 col-md-7 col-lg-8">
      <h4 class="product-name">Egg Nodlus</h4>
      <div class="product-excerpt hidden-sm">
        <p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat Proin gravida nibh vel velit auctor aliquet.</p>
      </div>
      <ul class="product-hover-wrap">
        <li class="product-link"><a href="single-product.html">VIEW</a>
        </li>
        <li class="add_to_cart hover">
          <a href="javascript:void(0)" class="addtocart" onclick="addless();" data-placement="left" data-toggle="popover"><i class="fa fa-shopping-cart"></i>
                            <span class="hdn popovercnt" id="CountPopover">
                                <span class="">
                                    <button class="increment inc" onclick="addless();" id=""><i class="fa fa-plus"></i></button>
                                <input type="text" class="form-control incount cartnumber" value="1" id="number">
                                    <button class="decrement dcr" onclick="addless();" id="" disabled="" style="cursor: not-allowed;"><i class="fa fa-minus"></i></button>
                                </span>
                            </span>
                        </a>
        </li>
      </ul>
    </div>
    <div class="single-qty hdn popovercnt" id="CountPopover">
      <div class="num-update">
        <button class="increment" onclick="addless();" id="increment"><i class="fa fa-plus"></i>
        </button>
        <input type="text" class="form-control cartnumber" value="1" id="number">
        <button class="decrement" onclick="addless();" id="decrement"><i class="fa fa-minus"></i>
        </button>
      </div>
    </div>
  </div>
</li>

Answer 1

Try this:

When the button is clicked you iterate all li-elements and write out the text for each .amount and .product-name to the console.

Of course you need to implement your way of presenting the date, put the below code will help you get it.

This is a general way

function addless() {
  $('li').each(function() {
    console.log($(".amount", this).text())
    console.log($(".product-name", this).text())
  })
}

Here is what you can add to your increment button:

This is an exact answer on you problem

var productListItem = $(this).closest('.product-list-item')

productListItem.each(function() {
    console.log($(".amount", this).text())
    console.log($(".product-name", this).text())
})

Check out this fiddle: https://jsfiddle.net/cLyvjwkL/9/

Answer 2

You can use closest(), find() and text() to get the title, and parents(), prev(), find() and text() for the amount:

var title = $(this).closest('.list-product-content').find('.product-name').text();
var amount = $(this).parents().prev().find('.amount').text();

See the working fiddle below:

// A $( document ).ready() block.
$(document).ready(function() {
  //incriment and decriment
  var add = $('.increment');
  var i;
  for (i = 0; i < add.length; i++) {
    add[i].onclick = function() {
      var count = $(this).next("input[type=text]").val()
      count++;
      $(this).next("input[type=text]").val(count)
      if (count > 0) {

        $(this).nextAll(".decrement").prop("disabled", false);
        $(this).nextAll(".decrement").css('cursor', 'pointer');
      }

      var title = $(this).closest('.list-product-content').find('.product-name').text();
      console.log(title);
      var amount = $(this).parents().prev().find('.amount').text();
      console.log(amount);
    }
  }
  var less = $('.decrement');
  var i;
  for (i = 0; i < less.length; i++) {
    less[i].onclick = function() {
      var count = $(this).prev("input[type=text]").val()
      count--;
      $(this).prev("input[type=text]").val(count)
      var roomcountval = $(this).prev(".cartnumber").val();
      if (roomcountval == 1) {
        $(this).prop("disabled", true);
        $(this).css('cursor', 'not-allowed');


      } else if (count <= 0) {
        $(this).prop("disabled", true);
      }

    }

  }
});

.list-view .product-entry {
  border: 1px solid #f1f1f1;
}
ul.list-view li.product-list-item {
  padding-left: 15px;
  padding-right: 15px;
}
.list-view .thumb-price {
  padding-left: 0;
  padding-right: 20px;
}
.list-view .price {
  margin: 0;
  position: absolute;
  right: -5px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}
.list-view .product-name {
  font-weight: 500;
  line-height: 14px;
  padding: 35px 0 30px;
  text-align: left;
}
.list-view .product-hover-wrap {
  max-width: 250px;
  margin: 30px 0 0;
}
.list-view .product-hover-wrap li {
  background: #f1f1f1;
}
.list-view .product-hover-wrap li:hover,
.list-view .product-hover-wrap li.hover {
  background: #e2001a;
}
.increment,
.decrement {
  padding: 10px;
  width: 55px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="product-list-item">
  <div class="product-entry clearfix">
    <div class="thumb-price col-xs-5 col-md-5 col-lg-4">
      <div class="product-thumbnail">
        <img class="retina" src="images/shop/s-3.jpg" alt="food">
      </div>
      <div class="price">
        <span class="amount">$11</span>
      </div>
    </div>
    <div class="list-product-content col-xs-7 col-md-7 col-lg-8">
      <h4 class="product-name">Egg Nodlus</h4>
      <div class="product-excerpt hidden-sm">
        <p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat Proin gravida nibh vel velit auctor aliquet.</p>
      </div>
      <ul class="product-hover-wrap">
        <li class="product-link"><a href="single-product.html">VIEW</a>
        </li>
        <li class="add_to_cart hover">
          <a href="javascript:void(0)" class="addtocart" data-placement="left" data-toggle="popover"><i class="fa fa-shopping-cart"></i>
                        <span class="hdn popovercnt" id="CountPopover">
                            <span class="">
                                <button class="increment inc" id=""><i class="fa fa-plus"></i></button>
                            <input type="text" class="form-control incount cartnumber" value="1" id="number">
                                <button class="decrement dcr" id="" disabled="" style="cursor: not-allowed;"><i class="fa fa-minus"></i></button>
                            </span>
                        </span>
                    </a>
        </li>
      </ul>
    </div>

  </div>
</li>

<br>
<br>
<li class="product-list-item">
  <div class="product-entry clearfix">
    <div class="thumb-price col-xs-5 col-md-5 col-lg-4">
      <div class="product-thumbnail">
        <img class="retina" src="images/shop/s-3.jpg" alt="food">
      </div>
      <div class="price">
        <span class="amount">$15</span>
      </div>
    </div>
    <div class="list-product-content col-xs-7 col-md-7 col-lg-8">
      <h4 class="product-name">Egg Nodlus2</h4>
      <div class="product-excerpt hidden-sm">
        <p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat Proin gravida nibh vel velit auctor aliquet.</p>
      </div>
      <ul class="product-hover-wrap">
        <li class="product-link"><a href="single-product.html">VIEW</a>
        </li>
        <li class="add_to_cart hover">
          <a href="javascript:void(0)" class="addtocart" data-placement="left" data-toggle="popover"><i class="fa fa-shopping-cart"></i>
                        <span class="hdn popovercnt" id="CountPopover">
                            <span class="">
                                <button class="increment inc" id=""><i class="fa fa-plus"></i></button>
                            <input type="text" class="form-control incount cartnumber" value="1" id="number">
                                <button class="decrement dcr" id="" disabled="" style="cursor: not-allowed;"><i class="fa fa-minus"></i></button>
                            </span>
                        </span>
                    </a>
        </li>
      </ul>
    </div>

  </div>
</li>

Answer 3

use it like this, hope it helps:

$('.increment').on('click', function(){
   var productName = $('.product-name').text();
   var productPrice = parseInt($('.amount').text());

});

Note that parseInt() only takes integer from string.