Question

我试图使用jquery .find()方法找到特定节点的后代。我注意到.find()根据树中当前节点上方父项的属性不匹配元素。第一个find返回0个元素，但第二个find返回我正在搜索的元素。我的问题是，这是否是find方法允许的选择器模式的限制，并且找到唯一具有此限制的jquery函数？我希望这两个都返回相同的元素。另外，是否有另一种jquery方法可以更简洁地完成与第二种方法相同的操作。这是我尝试做的一个简化示例，我无法删除.find('.input-group')，因为这是我的函数的输入。

＆＃13;

$(document).find('.input-group').find('.form-group .form-control')
$(document).find('.input-group').find('.form-control').filter('.form-group .form-control')

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml">

<body>
  <div class="form-group">
    <div class="input-group">
      <span class="input-group-addon">
       <input type="checkbox" aria-label="CVV Disabled" value="">
    </span>
      <input id="vtCvv" name="vtCvv" type="password" class="form-control" required="true" data-bv-field="vtCvv">
    </div>
  </div>
</body>

</html>

＆＃13;

Answer 1

.find()寻找元素的后代。您正试图找到父母，然后是后代。

你可以找到.input-group，然后通过DOM向后遍历到最近的＆＃34;使用.closest() .form-group然后您可以向下导航到.form-control，如下所示：

$(document).find('.input-group').closest('.form-group').find(".form-control")

或者您可以使用.parent()回溯到.form-group，如下所示：

$(document).find('.input-group').parent().find(".form-control")

我更喜欢.closest()，因为如果要在.input-group和form-group之间添加其他元素，则父级会有所不同，但.closest仍可以使用。

Answer 2

$('.form-group .input-group').find('.form-control');

jQuery根据匹配父类的类选择器查找子节点

2 个答案: