Question

我的结构看起来像这样：

<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>

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

如果我只想通过祖先寻求，我会使用$(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');

Answer 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时，您需要在那里添加一些支票，以查看是否有下一个（＆＃39; .wanted＆＃39;）兄弟，但如果您将其转换为一个小功能，可以重复使用它。

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

1 个答案: