使用jQuery查找父元素的最近的Div

Question

我正在尝试通过以下场景学习jQuery。为此，在阅读了多个SO问题后，我尝试了以下的jQuery代码；但它没有起作用。

$(this).closest('.viewLogText').parent().find('.reportLog').css("display", "none");

场景：

在一个具有CSS类“repeaterRecord”的div中，有三个子div元素。这些子div的CSS类分别是repeaterIdentifier、viewLogTitle和reportLog。

有两个具有这种结构（具有CSS类“repeaterRecord”的div）。

所示的div如下所示。

   <div class="viewLogTitle">
        <div class="viewLogText">
            View Report Log
        </div>
        <div>
            <img alt="Expand" src="Images/PlusIcon.GIF" class="expandLogIcon" />
            <img alt="Collapse" src="Images/MinusIcon.GIF" class="collapseLogIcon" />
        </div>
    </div>

当点击collapseLogIcon图像时，我需要隐藏（仅限）具有“reportLog”类的最近div（与“viewLogTitle”处于同一级别）。我们可以如何使用jQuery实现它？

更新的工作示例： http://jsfiddle.net/Lijo/L9w4F/11/ and http://jsfiddle.net/Lijo/L9w4F/8/ and http://jsfiddle.net/Lijo/L9w4F/12/ 参考： 1. 高效、简洁的查找下一个匹配兄弟节点的方法 2. jquery选择兄弟节点直到某个条件满足

- LCJ

Answer 1

你可以使用 .siblings() 查找最近的 div。 API 在这里。

- Andrea Turri

Answer 2

我建议使用以下内容：

我建议使用：

$(this).closest('.viewLogTitle').next('.reportLog').hide();

请注意，传递给next()方法的筛选器（'.reportLog'）意味着只有与该选择器匹配的viewLogTitle元素的下一个同级元素将受到影响。如果.viewLogTitle的下一个同级元素总是目标元素（HTML不会更改），则可以省略筛选器。

或者，如果它们不总是按顺序排列（但“最近”的始终是要受影响的），则对于后续同胞元素：

$(this).closest('.viewLogTitle').nextAll('.reportLog:first').hide();

或者针对前一个同级元素（如果.reportLog位于.viewLogTitle之前）：

$(this).closest('.viewLogTitle').prevAll('.reportLog:first').hide();

参考资料:

• :first选择器.
• next()方法。
• nextAll()方法。
• prevAll()方法。

- David Thomas

---

在 next 中，如果只有一个元素，则不需要过滤选择器。 - Esailija

没错，就目前而言是这样的；但通过过滤器的意图是为了解决下一个兄弟节点可能不是所需目标的情况。虽然公平地说，我应该解释一下这个意图。编辑 - David Thomas

如果不是那样的话，“next”就不太适合了:P - Esailija

因此，以下是建议。=) - David Thomas

是的，我现在唯一评论的原因是每次我看到 next 与过滤器一起使用时，都是因为作者误解了 next。next(filter) 直观地看起来像是要找到下一个与 filter 匹配的元素，但实际上它只是取下一个元素兄弟并返回它（如果它与过滤器匹配），否则不返回任何东西。 - Esailija

同意；你的评论是正确的，我的解释非常明显地遗漏了。=) - David Thomas

Answer 3

您可以使用 siblings() 方法：

$(this).closest('.viewLogText').siblings('.reportLog').hide()

您也可以尝试使用hide()方法，它与.css("display", "none");相同。

- Ram