jQuery: Access the value of the element adjacent to the anchor tag

Question

I have element structure as follows:

I need to increment/decrement the value "120" on .btn-min and .btn-plus class buttons.

I tried to access the value using var value = $('.btn-min').find('.value').html(); and also find, children but not getting the results.

Edit: As pointed out by @Taplar the value section is not a child of the anchor tag. The problem is there are many anchor tags like these, and I need to increment the very next adjacent value having class value

user_2233959 · Answer

As element containing .value class is a children of element containing .qty-adjust-inner you can search something like.

   $('.qty-adjust-inner').find(".value").find('span').text().trim()

user_11258866 · Answer

Take it easy

just add an id to that element

Demo :

$(document).on("click",".btn-min",function(){
    let value =  parseInt($(".value #result").html());
    $(".value #result").html(value-1);
});

$(document).on("click",".btn-plus",function(){
    let value = parseInt($(".value #result").html());
    $(".value #result").html(value+1);
});

user_10606400 · Answer

You can give class="values" to easily get value i.e :120 and then check if the button which is click has class btn-minus or btn-plus depending on this increment/decrement values .

Demo Code :

$(" .btn").click(function() {
//get closest div with class qty-adjust-inner -> find .values
var selector =$(this).closest(".qty-adjust-inner").find(".values");
  var values = parseInt(selector.text());
  //check if it has class btn-min
  if ($(this).hasClass("btn-min")) {
    values--;//subtract by 1

  } else if($(this).hasClass("btn-plus")) {
    values++;//add by 1
  }
 selector.text(values)//put value again

})

user_3880585 · Answer

....there are many anchor tags like these, and I need to get the value of the element which is adjacent to the anchor

According to the comment you can combine.next('.value'), .prev('.value'):

var ele = ($(this).next('.value').length > 0) ? $(this).next('.value') :
                                                          $(this).prev('.value');
 +ele.find('span font:last').text();

$('.btn-min, .btn-plus').on('click', function(e) {
    var ele = ($(this).next('.value').length > 0) ? $(this).next('.value') : $(this).prev('.value');
    var val = +ele.find('span font:last').text();
    if (this.classList.contains('btn-plus')) {
        val++;
    } else {
        val--;
    }
    ele.find('span font:last').text(val);
})

user_10195722 · Answer

Thanks a lot everyone to help me out here!

Special thanks to Taplar for pointing out that the value tag was not a child of the anchor tag but was adjacent to it. As there are many such anchor tags, I had to get the value of the element which is adjacent to it everytime.

Daniel Szalay's answer helped me here. I found the adjacent elements by using the following line:

 $(document).on("click","a[class='btn btn-min']", function (e) {
      //decrement product qty by 1
      // var value = $('.value').find('span').text().trim();
      var value =$(this).next().find('span').text().trim();
  });

jQuery: Access the value of the element adjacent to the anchor tag

5 Answers