jQuery從嵌套元素獲取元素屬性

Question

我處於以下情況：

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

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

我正在嘗試通過class =“ inputgrp ”上的click事件從輸入中獲取屬性avl的值

我嘗試過：

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

和

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

但是沒有成功。 希望能得到一些指導，因為我不知道我錯了什么。

Answer 1

 $(".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"> 

1. 使用數據屬性，因為AVL不是有效屬性
2. 使用.next()因為輸入在click元素旁邊

Answer 2

.find搜索當前元素的子級。 該input是不是一個child ，但一個sibling的.inputgrp

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

• 使用data-avl作為屬性使其有效。
• 使用.sibling()函數選擇任何同級
• 如果input元素始終是下一個元素，請使用.next()函數

Answer 3

在html輸入元素上使用data-avl=""屬性，在jQuery中使用.data('avl')獲得屬性的值

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

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

})