0

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>

4
  • 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? Jan 11, 2017 at 12:59
  • 1
    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
    Jan 11, 2017 at 13:01
  • check this fiddle jsfiddle.net/cLyvjwkL Jan 11, 2017 at 13:10
  • @AjeshKolakkadan, check my answer. Jan 11, 2017 at 13:14

3 Answers 3

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/

3
  • check this fiddle i need to get the content from that classes onclick the increment button. check this fiddle jsfiddle.net/cLyvjwkL Jan 11, 2017 at 13:13
  • But what are you needing the content for. Your increment buttons increment a value.
    – Zorken17
    Jan 11, 2017 at 13:16
  • I have now updated my code and added a fiddle. Please check it out and see if that is of use for you.
    – Zorken17
    Jan 11, 2017 at 13:40
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.

1
  • 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.
    – freedomn-m
    Jan 11, 2017 at 13:01
0

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>

6
  • @AjeshKolakkadan, I've seen it. Did you see my answer? Jan 11, 2017 at 13:16
  • when i click its alert two food item name Jan 11, 2017 at 13:16
  • Yes. Isn't that what you need? The content from class="product-name" and class="amount". Jan 11, 2017 at 13:17
  • @AjeshKolakkadan, If you run the code snippet from my answer you will see the console logs for the title and the amount. Jan 11, 2017 at 13:19
  • 1
    @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 Jan 11, 2017 at 13:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.