JQuery Tree Traversal：混合最近的和兄弟姐妹

Posted 2023-03-29

【中文标题】JQuery Tree Traversal：混合最近的和兄弟姐妹

【英文标题】：JQuery Tree Traversal : mixing closest and siblings

【发布时间】：2014-09-16 09:47:08

【问题描述】：

我的结构看起来像这样：

<div class="wanted" id="but-not-really">
    <div class="wanted">
        <div class="dad">
            <input class="reference"/>
            <input class="wanted"/>
            <input class="bro3"/>
        </div>
    </div>
</div>

我想获取我的.reference 元素（在我的 JS 循环中为 $(this)）的祖先（div.wanted）或兄弟（input.wanted）的宽度，这取决于哪个是最接近。

如果我只想通过祖先寻找，我会使用$(this).closest('.wanted').width()。 如果我只想通过兄弟姐妹寻找，我会使用$(this).siblings('.wanted').width()。

我尝试使用$(this).parents().find('.wanted').width()，但网页包含文档中的其他干扰元素。这就是为什么我要在兄弟姐妹和祖先中寻找最接近的 .wanted 元素。

解决方案 N°1（感谢@undefined）：

首先使用siblings方法检查兄弟姐妹，如果集合 为空然后使用closest。

var width = $(this).siblings('.wanted').length === 0
             ? $(this).closest('.wanted').css('width')
             : $(this).siblings('.wanted').css('width');

【问题讨论】：

您可能必须手动向上和向下迭代树并记录“分离度”以在循环结束时进行比较。我不知道有任何内置的 jQuery 函数可以为你做这件事。

首先使用siblings方法检查兄弟姐妹，如果集合为空则使用closest。

@undefined 问题是找到祖先和后代之间最接近的，而不是存在的

您的循环中的this 是什么？显示您的代码。

@Satpal: $(this) 是 .reference 元素。我的代码有点复杂，与这个问题无关。

【参考方案1】：

这样的事情怎么样？

var closestNextDistance = $(this).nextUntil('.wanted').length;
var closestPrevDistance = $(this).prevUntil('wanted').length;
var closestParentDistance = $(this).parentsUntil('.wanted').length;

然后比较距离判断哪个是最近的元素，如果父元素更近，调用

$(this).closest(selector).css('width')

如果其中一个兄弟姐妹更接近，则调用

$(this).prevAll('.wanted').css('width')

或

$(this).nextAll('.wanted').css('width')

见http://jsfiddle.net/3z7t5gqn/

当 nextUntil 返回 0 时，您需要在那里添加一些检查以查看是否有 next('.wanted') 兄弟，但如果将其变成一个小函数，则可以重复使用它。