jQuery找到前面的非祖先元素答案

【问题标题】：jQuery find preceding non-ancestor elementjQuery找到前面的非祖先元素
【发布时间】：2011-09-08 18:45:37
【问题描述】：

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

.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

【问题讨论】：

你在说什么current，你想在提供的html中选择什么？
根据他的例子，他想在将鼠标悬停在链接上时选择强项

标签： jquery html jquery-selectors

【解决方案1】：

这是你想要做的吗？

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

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

你也可以这样做：

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

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

【讨论】：

就是这样，但采用了不同的方法……HTML完全不同，所以我不能依赖div.sod
是的，当问题中的代码与实际代码完全不同时，很难提出解决方案

【解决方案2】：

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

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

我不相信有一种方法可以假设遍历 dom。

【讨论】：

【解决方案3】：

您可以使用closest() 匹配暴露sod 类的祖先<div> 元素，然后使用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");
});

更新了小提琴here。

【讨论】：

【解决方案4】：

试试

$(this).closest()

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

【讨论】：

再读一遍问题：“.closest() 不能完成这项工作，因为它不是祖先元素”
find 以相反的方式工作，它寻找后代元素。在这种情况下，这也无济于事。但是，closest（获取 .somerandomname）和 find（获取所需元素）的组合可能起作用，具体取决于 OP 实际尝试执行的操作。跨度>