Question

我有这个标记：

<div class=gui>
    <div class=form>
        <div class=textbox></div>
        <div class=textbox></div>
        <div class=textbox></div>
        <div class=selectbox></div>
        <div class=selectbox></div>
        <div class=button></div>
    </div>
</div>

我想要做的是迭代div并找到他们相应的父母。像：

文本框＆gt;形式

selectbox＆gt;形式

按钮＆gt;形式

表格＆gt; GUI

这是我的jQuery选择器：

var dParent = div.closest("div.form, div.gui");

它适用于文本和选择框，但不适用于表单。奇怪的是，表单将自己报告为父级而不是gui。

任何想法可能出错？

感谢

Answer 1

如果调用元素与选择器匹配，

.closest()将会选择调用元素，因此当您调用$('.form').closest('.form, .gui')时，它将返回自身.form作为最接近的元素。因此，您只想从.parent()：

调用最近的

var dParent = div.parent().closest("div.form, div.gui");

See example →

Answer 2

var parent = div.hasClass('form') ? div.closest('.gui') : div.closest('.form');

我最好的猜测是不了解结构的任何其他内容。

Answer 3

Closest通过从当前元素开始并遍历树直到找到与选择器匹配的元素为止。当您从表单开始时，表单本身与选择器匹配，因此选择它。由于您要做的只是查找父级，因此使用的适当方法是parents和选择器：

  div.parents('.form:first,.gui:first');

用过：

  div.each( function() {
      alert( $(this).attr('class')
                + ' has parent '
                + $(this).parents('.form:first,.gui:first')
                         .attr('class')
      );
  });

请参阅以下内容中的示例：http://jsfiddle.net/tFqLE/

jQuery：选择器问题（最近的）

3 个答案: