jQuery查找前面的非祖先元素

Question

如何匹配当前父元素之前的元素。

由于不是祖先元素，因此.parents('form')和.closest()无法胜任。

由于不是兄弟元素，因此.prev()无法胜任。

示例HTML：

<div class="somerandomname">
    <div class="contents">
        <h3 class="title">sadois</h3>
        <strong>strong</strong>
        <h3 class="nottitle">osdjia</h3>

        <div class="sod">
            <p class="paragraph">
                <a class="link1" href="#">link 1</a>
                <a class="link2" href="#">link 2</a>
                <a class="link3" href="#">link 1</a>
            </p>
        </div>
    </div>
</div>

相关的js：

$('p>a').hover(function(){
   $(this).closest('strong').css({'background': 'red'});
}, function(){
   $(this).closest('strong').css({'background': 'transparent'});
});

jsFiddle

- Teneff

---

你所说的“current”是什么，你想在提供的HTML中选择什么？ - red-X

根据他的示例，当鼠标悬停在链接上时，他想选择强效。 - Andy

Answer 1

这是您想要做的吗？

$(this).closest('.sod').siblings('strong')

http://jsfiddle.net/D3xBz/1/

---

您也可以这样做：

$(this).closest('.contents').find('>strong')

假设.contents div在您的实际代码中存在。

- Andy

---

就是这样，但是采用了不同的方法... HTML 完全不同，所以我不能依赖于 div.sod 的存在。 - Teneff

是的，当问题中的代码与实际代码完全不同的时候，很难想出一个解决方案。 - Andy

Answer 2

我认为你必须假设你知道一些文档结构。例如：

$("strong", $(this).closest('div.container')).css({'background': 'red'});

我不相信有一种方法可以在遍历 DOM 的同时向上遍历。

- Timbo

Answer 3

您可以使用closest()来匹配祖先<div>元素，该元素暴露了sod类，然后使用prevAll()和:last选择器来匹配前面的<strong>元素：

$("p > a").hover(function() {
    $(this).closest(".sod")
           .prevAll("strong:last")
           .css("background", "red");
}, function() {
    $(this).closest(".sod")
           .prevAll("strong:last")
           .css("background", "transparent");
});

这里更新了代码片段链接。

- Frédéric Hamidi

Answer 4

尝试

$(this).closest()

这将沿着父级树向上工作，并返回最接近你想要的值。

- Graeme Leighfield

---

请再次阅读问题：“.closest()不起作用，因为它不是祖先元素”。 - James Allardice

“find” 的作用方式相反，它查找后代元素。这在这种情况下也没有帮助。然而，结合使用 closest（获取 .somerandomname）和 find（获取所需元素）可能有效，具体取决于 OP 实际想要做什么。 - James Allardice