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>

Your question is unclear. Could you please elaborate what you are trying to achieve and post any code if you have tried to achieve this earlier? — Guruprasad J Rao
– Guruprasad J Rao, Commented Jan 11, 2017 at 12:59
This is invalid HTML and has issues with propagation: <a href="javascript:void(0)" class="addtocart" onclick="addless();" data-placement="left" data-toggle="popover"><i class="fa fa-shopping-cart"></i>........ </a> — mplungjan
– mplungjan, Commented Jan 11, 2017 at 13:01

Zorken17 · Accepted Answer · 2017-01-11 13:39:26Z

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/

edited Jan 11, 2017 at 13:39

answered Jan 11, 2017 at 12:59

Zorken17

1,8861 gold badge12 silver badges16 bronze badges

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

3 Comments

Ajesh Kolakkadan Over a year ago

check this fiddle i need to get the content from that classes onclick the increment button. check this fiddle jsfiddle.net/cLyvjwkL

Zorken17 Over a year ago

But what are you needing the content for. Your increment buttons increment a value.

Zorken17 Over a year ago

I have now updated my code and added a fiddle. Please check it out and see if that is of use for you.

Sonu Bamniya · Accepted Answer · 2017-01-11 12:59:01Z

0

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.

answered Jan 11, 2017 at 12:59

Sonu Bamniya

1,1301 gold badge14 silver badges30 bronze badges

1 Comment

fdomn-m Over a year ago

While technically correct for the example provided, you should consider that it's likely there would be multiple products which is why they are asking for help with this, from the question: "When I click, I only need content from inside of this list item". This would not work with multiple products.

Ionut Necula · Accepted Answer · 2017-01-11 13:36:08Z

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>

Yes. Isn't that what you need? The content from class="product-name" and class="amount".
@AjeshKolakkadan, If you run the code snippet from my answer you will see the console logs for the title and the amount.
@AjeshKolakkadan, see the updated answer. I've changed the var title = $(this).parents().find('.product-name').text(); with var title = $(this).closest('.list-product-content').find('.product-name‌').text();. This should work. Also you can see the updated jsfiddle here jsfiddle.net/cLyvjwkL/7

Collectives™ on Stack Overflow

get class using jquery

3 Answers 3

3 Comments

1 Comment

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related