你如何在javascript中选择父div的父级？答案

【问题标题】：How do you select parent of parent div in javascript?你如何在javascript中选择父div的父级？
【发布时间】：2014-06-11 00:58:54
【问题描述】：

我有一个使用 Javascript 的自定义手风琴设置。目前使用 onclick 我正在将样式切换到父 div（当前持有一类“卡片”并添加“卡片打开”）。我的问题是如何提高一个 div 并开始使用“time-steam-event”类来操作 div？

实时示例：http://bit.ly/1rr6zGA

HTML：

<div class="time-stream-event" id="{entry_id}">
    <div style="background: url({timeline_item_img}) no-repeat center center;" class="event-bg grayscale"></div>
    <div class="card">
        <h3><a href="{title_permalink="/timeline"}">{title}</a></h3>
        <div class="event-year">{timeline_item_date format="%F %Y"}</div>
        <a href="#" class="togglelink"></a>
        <div class="toggle-box">
            <p>{timeline_item_description}</p>
            <div class="employees">Number of Employees</div>
            <div class="employee-count-no"> <i class="ss-icon">&#x1F465;</i> {timeline_item_employees}</div>
        </div>
        <div class="open-arrow"></div>
    </div>
</div>

Javascript：

$.fn.slideFadeToggle  = function(speed, easing, callback) {
    return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);
};

$('.toggle-box').hide();

$('a.togglelink').on('click', function (e) {
    e.preventDefault();
    var elem = $(this).next('.toggle-box')
    $('.toggle-box').not(elem).hide();
    elem.slideFadeToggle();

    var parent_div = $(this).parent().toggleClass('card-open');

});

【问题讨论】：

试试$(this).closest('.time-stream-event');
尝试 .parentElement 它将根据您的 DOM 获取直接父级。
document.getElementsByClassName("togglelink")[0].parentElement;

标签： javascript jquery html css

【解决方案1】：

document.getElementsByClassName("togglelink")[0].parentElement;

这就是使用 Javascript 的方式。

 document.getElementsByClassName("togglelink")

返回具有“togglelink”类的元素数组。您需要获取确切元素。如果你只有一个元素我的代码就好了。

【讨论】：

【解决方案2】：

您可以使用.closest() 或.parents()：

var obj= $(this).closest('.time-steam-event');//reference to closest .time-steam-event

或

var obj= $(this).parents('.time-steam-event');//reference to closest .time-steam-event

【讨论】：

所以我在 onclick 中添加了以下内容，它不会切换类“.time-stream-event-open”。我究竟做错了什么？ 'var obj= $(this).closest('.time-steam-event'); obj.toggleClass('time-steam-event-open');'
你能分享一下问题小提琴吗。
@DanLee：如果您可以使用相关代码创建小提琴，那就太好了。
@DanLee：小提琴出了什么问题。在 chrome 上切换对我来说效果很好。

【解决方案3】：

你可以这样：

var parent_div = $(this).parent().parent();

或：

var parent_div = $(this).parent().closest(".time-steam-event");

【讨论】：

【解决方案4】：

如果您的 div 在层次结构中位于第二位（按级别），您可以使用

var yourdiv = $(this).parent().parent();

或者您也可以使用.closest()

var yourdiv = $(this).closest('.time-steam-event');

【讨论】：