使用选择器从给定结构获取容器

Question

考虑以下html结构：

<div>
     <div class="top">
        <div id="id1">123</div>
     <div>

     <div class="top">
        <div id="id2">123</div>
     <div>
</div>

现在我想在class =“top”和id =“id2”的基础上选择容器，这样我就可以获得带有top top的容器。我怎样才能做到这一点？我想有一些选择器。

P.S：我正在寻找的id不一定是班级的直接父母。

Answer 1

这是你要找的吗？

$('#id2').closest('.top')

它将从ID开始并一直向上发送，直到找到班级顶部。

Answer 2

使用.closest(...)

$('#id2').closest('.top');

或者如果你的结构总是像你在问题中那样，那么可能很简单，

$('#id2').parent();

会做的。

Answer 3

如果“容器”是指标记，而不是DOM元素在javascript中添加它：

jQuery.fn.outerHTML = function(s) {
    return (s)
        ? this.before(s).remove()
        : jQuery("<p>").append(this.eq(0).clone()).html();
}

然后像这样使用它：

$('.top').outerHTML();