jQuery get element attribute from nested element

Question

I'm in a situation as follows:

<span class="inputgrp">
  <span class="additem">

  </span>
</span>
<input type="text" avl="abc">

I'm trying to get the value of the attribute avl from the input with a click event on class="inputgrp"

I have tried with:

$(".additem").click(function () {
  var v = $(this).parent().find("input:text").attr("avl")
})

and

$(".inputgrp").click(function () {
  var v = $(this).prev("span").next("input:text").attr("avl")
})

But without success. Would appreciate some guide as I have no clue what I am dong wrong.

guradio · Accepted Answer · 2017-05-02 09:38:16Z

3

$(".inputgrp").click(function() {

  alert($(this).next("input:text").attr("data-avl"))

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="inputgrp">
  <span class="additem">
1
  </span>
</span>
<input type="text" data-avl="abc">

Use data attribute since avl is not a valid attribute
use .next() since input is next to the click element

answered May 2, 2017 at 9:38

guradio

15.6k4 gold badges39 silver badges65 bronze badges

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

Comments

DoXicK · Accepted Answer · 2017-05-02 09:40:40Z

0

.find searches for children of the current element. The input is not a child but a sibling of .inputgrp

$('.inputgrp').on('click',function() {
    var v = $(this).siblings('input[data-avl]').attr('data-avl');
});

Use data-avl as an attribute to make it valid.
Use the .sibling() function to select any of the siblings
If the input element is always going to be the next element, use the .next() function

answered May 2, 2017 at 9:40

DoXicK

4,80226 silver badges22 bronze badges

Comments

lotfio · Accepted Answer · 2017-05-02 09:42:49Z

0

use a data-avl="" attribute on your html input element and in jQuery use .data('avl') to get the value of the attribute

$(".inputgrp").click(function() {

  alert($(this).next("input:text").data("avl"));

})

answered May 2, 2017 at 9:42

lotfio

1,9362 gold badges20 silver badges34 bronze badges

Collectives™ on Stack Overflow

jQuery get element attribute from nested element

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related