javascript - jQuery 获取前一个元素未按预期工作

Question

这个问题已经有答案了:

Why does my logic, using closest, not work? (1 个回答)

已关闭 3 年前。

我正在使用 jQuery 尝试在选中复选框时获取最接近的前一个元素...

jQuery( document ).ready(function() {

    jQuery(".input1").change(function() {
    
      var myinput = jQuery(this).closest(".myinput");
  		console.log(myinput);

    });  
          
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <td>
    <div class="element1">
      <input class="myinput">
    </div>
  </td>
  <td>
    <div class="element2">
    </div>
  </td>
  <td>
    <div class="element3">
    <input type="checkbox" class="input1">
    </div>
  </td>
</table>

当单击该复选框时，它会在控制台日志中为我提供原始单击的元素，而不是 myinput元素。

我哪里出错了？

Answer 1

试试这个，获取父表，然后获取最接近的输入。添加 .closest('table') 选择器后，console.log 显示匹配的输入

jQuery( document ).ready(function() {

    jQuery(".input1").change(function() {
      var myinput = 
        jQuery(this).closest('table').find(".myinput");
        console.log(myinput);

    });  
          
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <td>
    <div class="element1">
      <input class="myinput">
    </div>
  </td>
  <td>
    <div class="element2">
    </div>
  </td>
  <td>
    <div class="element3">
    <input type="checkbox" class="input1">
    </div>
  </td>
</table>