CODEWITHSUNDEEP
javascripthtmljquery
Toji
Toji

Reputation: 250

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

I have element structure as follows:

<div class="qty-adjust-inner">
    <a class="btn btn-min">
        <font style="vertical-align: inherit;"><font style="vertical-align: inherit;">-</font></font>
    </a>
    <div class="value">
        <input type="hidden" value="1" />
        <span data-bind="text: $parent.qty" class="qty_value">
            <font style="vertical-align: inherit;"> <font style="vertical-align: inherit;" class="">120</font></font>
        </span>
    </div>
    <a class="btn btn-plus">
        <font style="vertical-align: inherit;"><font style="vertical-align: inherit;">+</font></font>
    </a>
</div>

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

Upvotes: 3

Views: 117

Answers (5)

gaetanoM
gaetanoM

Reputation: 42054

....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);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="qty-adjust-inner">
    <a class="btn btn-min"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">-</font></font></a>
    <div class="value">
        <input type="hidden" value="1">
                <span data-bind="text: $parent.qty" class="qty_value">
                    <font style="vertical-align: inherit;">
                        <font style="vertical-align: inherit;" class="">120</font></font></span>
    </div>
    <a class="btn btn-plus"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">+</font></font></a>
    <br/>
    <a class="btn btn-min"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">-</font></font></a>
    <div class="value">
        <input type="hidden" value="1">
                <span data-bind="text: $parent.qty" class="qty_value">
                    <font style="vertical-align: inherit;">
                        <font style="vertical-align: inherit;" class="">220</font></font></span>
    </div>
    <a class="btn btn-plus"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">+</font></font></a>
    <br/>
    <a class="btn btn-min"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">-</font></font></a>
    <div class="value">
        <input type="hidden" value="1">
                <span data-bind="text: $parent.qty" class="qty_value">
                    <font style="vertical-align: inherit;">
                        <font style="vertical-align: inherit;" class="">320</font></font></span>
    </div>
    <a class="btn btn-plus"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">+</font></font></a>
</div>

Upvotes: 1

Toji
Toji

Reputation: 250

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();
  });

Upvotes: 1

Swati
Swati

Reputation: 28522

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

})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="qty-adjust-inner">
  <a class="btn btn-min">
    <font style="vertical-align: inherit;">
      <font style="vertical-align: inherit;">-</font>
    </font>
  </a>
  <div class="value">
    <input type="hidden" value="1">
    <span data-bind="text: $parent.qty" class="qty_value">
                    <font style="vertical-align: inherit;">
                    <!--give class-->
                      <font style="vertical-align: inherit;" class="values">120</font></font></span>
  </div>
  <a class="btn btn-plus">
    <font style="vertical-align: inherit;">
      <font style="vertical-align: inherit;">+</font>
    </font>
  </a>
</div>

Upvotes: 1

Hasan_Naser
Hasan_Naser

Reputation: 224

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);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="qty-adjust-inner">

     <a class="btn btn-min">
       <font style="vertical-align: inherit;">
          <font style="vertical-align: inherit;">-</font>
       </font>
     </a>
     
     
      <div class="value">
          <input type="hidden" value="1">
          <span data-bind="text: $parent.qty" class="qty_value">
              <font style="vertical-align: inherit;">
                <font style="vertical-align: inherit;" id="result">120</font>
              </font>                 
          </span>
      </div>

            
     <a class="btn btn-plus">
       <font style="vertical-align: inherit;">
      ´ <font style="vertical-align: inherit;">+</font>     
      </font>
     </a>
     
     
</div>

Upvotes: 1

Asutosh
Asutosh

Reputation: 1828

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()

Upvotes: 2

Related Questions