Question

我有以下html结构。当我点击任何按钮时，我需要通过class名称获得最接近（单个）的文本框值。我使用的是jQuery API的closest()。

HTML

<div class="input-group col-sm-12">
    <input type="text" class="cls1" value="1" /> 
    <input type="text" class="cls2" value="2" />  
    <button class = "btn" >button</button>           
</div>

<div class="input-group col-sm-12">
    <input type="text" class="cls1" value="1" /> 
    <input type="text" class="cls2" value="2" />  
    <button class = "btn" >button</button>           
</div>
<div class="input-group col-sm-12">
    <input type="text" class="cls1" value="1" /> 
    <input type="text" class="cls2" value="2" />  
    <button class = "btn" >button</button>         
</div>

jQuery代码

$('.btn').on('click', function(){
    // this is not working.
    console.log($(this).closest('.cls1:first').val());
})

请告知。

Answer 1

您正在寻找兄弟元素，因此请使用.siblings()。 .closest()用于查找第一个匹配的祖先元素。

$('.btn').on('click', function() {

  console.log($(this).siblings('.cls1:first').val());
  // Its not working
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="input-group col-sm-12">
  <input type="text" class="cls1" value="1" />
  <input type="text" class="cls2" value="2" />
  <button class="btn">button</button>
</div>

<div class="input-group col-sm-12">
  <input type="text" class="cls1" value="1" />
  <input type="text" class="cls2" value="2" />
  <button class="btn">button</button>
</div>
<div class="input-group col-sm-12">
  <input type="text" class="cls1" value="1" />
  <input type="text" class="cls2" value="2" />
  <button class="btn">button</button>
</div>

Answer 2

您可能需要使用prev来获取按钮之前的第一个文本框。最近的用于让父母而不是兄弟姐妹。

<强> Live Demo

$('.btn').on('click', function(){    
    alert($(this).prev().val());       
})

值得理解closest()和prev()

之间的区别

closest()

对于集合中的每个元素，获取第一个元素通过测试元素本身并遍历来匹配选择器通过DOM树中的祖先。

prev()

获取该组中每个元素的前一个兄弟匹配的元素，可选择由选择器
过滤

Answer 3

$('.btn').on('click', function(){
    alert($(this).parent().find('.cls1').val());
    // Its not working
})

尝试这种方法

demo

在jQuery

3 个答案: