javascript - jQuery如何获取父元素的兄弟元素

Question

今天，当我将鼠标悬停在不同的元素上时，我试图触发特定元素的工具提示。我在 jQuery 方面没有那么丰富的经验，但我最终通过文档阅读了它。后来看了看我是怎么引用target元素的，好像真的很绕。我想知道是否有更好的方法可以产生相同的结果。

我正在使用的 HTML 如下:

<div class="item">
    <h3 class="level-title">ITEM 1
        <span class="level-label" data-toggle="tooltip" data-placement="top" data-animation="true" title="Tooltip text that pops up">Title Text
        </span>
    </h3>
    <div class="level-bar">
        <div class="level-bar-inner" data-level="70%">
        </div>                                      
    </div>
</div>

<div class="item">
    <h3 class="level-title">ITEM 2
        <span class="level-label" data-toggle="tooltip" data-placement="top" data-animation="true" title="Tooltip text that pops up">Title Text
        </span>
    </h3>
    <div class="level-bar">
        <div class="level-bar-inner" data-level="70%">
        </div>                                      
    </div>
</div>

在我的 HTML 文件中，我有 5 个左右的项目部分。我想要的是工具提示不仅在观众将鼠标悬停在“标题文本”上时触发，而且在他们将鼠标悬停在“level-bar-inner”div 上时触发。为了实现这一目标，我提出了以下 JavaScript:

jQuery(document).ready(function($) {
...
    $('.level-bar-inner').hover(
        function(e) {
            $($($(e.target).parent().siblings()[0]).children()[0]).tooltip('show');
        },
        function(e) {
            $($($(e.target).parent().siblings()[0]).children()[0]).tooltip('hide');
        }
    );
...
});

这似乎是一个草率的解决方案，但却是一个合理的解决方案。这种方法取决于只有一个 sibling 和一个 child ，幸运的是，在我的情况下，我的 HTML 文件中的所有“项目”部分都是如此。这让我问是否有更好/更有效的方法来检索这个元素，或者甚至只是切换它的一般工具提示。

Answer 1

您可以使用 this 关键字引用引发事件的元素。您还可以使用 jQuery 的 DOM 遍历方法，而不是重复从 jQuery 对象中获取 DOMElement，然后再将其返回到 jQuery 对象中。试试这个:

$('.level-bar-inner').hover(function(e) {
    $(this).parent().prev().find('span').tooltip('show');
}, function(e) {
    $(this).parent().prev().find('span').tooltip('hide');
});