jQuery找到前面的非祖先元素

时间:2011-09-08 09:16:09

标签: jquery html jquery-selectors

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

.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

4 个答案:

答案 0 :(得分:2)

这是你想要做的吗?

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

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


你也可以这样做:

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

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

答案 1 :(得分:1)

我认为您必须假设您了解一些文档结构。 E.g:

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

我不相信有一种方法可以在它上升时进行遍历。

答案 2 :(得分:1)

您可以使用closest()来匹配公开<div>类的祖先sod元素,然后使用prevAll():last选择器匹配前面的<strong> {1}}元素:

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

更新了小提琴here

答案 3 :(得分:0)

尝试

$(this).closest()

这将在父树上运行,并将最接近的值返回到您想要的值。