Question

我经常发现我需要选择附近的元素，通常在公共容器中，但不是兄弟或同一“树线”。例如，给定此HTML：

<div id="container-left" class="container">
    <div class="sidebar">
        <button class="more-link">Show Extras</button>
    </div>
    <div class="content">
        <div class="tidbits">
            <p>Lorem ipsum beep bop boop</p>
            <p class="extra hidden">Exxtra info about lorem ipsum!</p>
        </div> 
    </div>
</div>
<div id="container-right" class="container">
    <div class="sidebar">
        <button class="more-link">Show Extras</button>
    </div>
    <div class="content">
        <div class="tidbits">
            <p>Lorem ipsum beep bop boop</p>
            <p class="extra hidden">Exxtra info about lorem ipsum!</p>
        </div> 
    </div>
</div>

我要做的是将一个事件监听器附加到“显示附加内容”button，其中p标记的目标是extra，然后单击，切换hidden课程。所以（使用jQuery）我通常选择这样：

$(".more-link").on("click",function(){
    var $this = $(this);
    var $extraElement = $this.closest(".container").find(".extra");
    $extraElement.toggleClass("hidden");
});

我的问题：有没有比extra组合更好的方法来选择.closest().find()元素？关于它的一些东西感觉有点笨重。

Answer 1

好吧..你可以导航到侧边栏兄弟姐妹并找到额外的......但是这个混乱会很相似......

其他方法是在按钮处生成HTML5数据属性：

<button class="more-link" data-extra='#some-generated-extra-id'>Show Extras</button>
...
<p id='some-generated-extra-id' class="extra hidden">Exxtra info about lorem ipsum!</p>

您的代码：

$(".more-link").on("click",function() {
    var $extraElement = $($(this).data('extra'));
    $extraElement.toggleClass("hidden");
});

jQuery Traversal - 找到一个相对于共同祖先的元素

1 个答案: