jquery获取不同父元素中的input元素

Question

HTML

 <div>                                
    <div>
      <input type="text" class="search_input form-control" placeholder="Search..."></div>
      <span>
         <img src="images/btn-reset-search.png" class="clear_text" alt="">
       </span>
 </div>

当我点击具有classname：clear_text的图片时，我想获取输入字段。

我试过了：

 $('.clear_text').parent().prev('input');

Answer 1

试试这个：

$('.clear_text').on("click", function()
{
    $(this).closest("div").find("input");
});

导航到第一个父div（closest("div")），然后在其中搜索input（find("input")）。如果您不确定input:first元素可能有多少输入，则可以使用div。

Answer 2

解决方案：

$(document).on('click', '.clear_text', function(){
     var $input = $(this).closest("div").find("input");
     //do whatever you want with $input, $input.val(), $input.addClass(), etc..
});

Answer 3

尝试

 $('.clear_text').parent().prev().find('input');

Answer 4

尝试以下解决方案：

$(function(){
  $(".clear_text").click(function(){
    var inputField = $(this).parent().closest('input[type="text"]');
  })
})

或

$(function(){
  $(".clear_text").click(function(){
    var inputField = $(this).parent().parent().find('input[type="text"]');
  })
})

此处inputField是必需的输入。