JQuery parents(）.eq(2） 和 .parent(）.parent(） 不行为

JQuery parents().eq(2) and .parent().parent() not behaving?

本文关键字：parent parents eq JQuery      更新时间：2023-09-26

这是我的代码：

function showNotification(title, message) {
    var newNotification = $('<div></div>');
    var newNotificationHeader = $('<div>' + title + '</div>');
    var newNotificationCloser = $('<div></div>');
    newNotificationCloser.click(function(){
        closeNotification($(this).closest('notification'));
    });
    var newNotificationMessage = $('<div>' + message + '</div>');
    newNotification.attr('class', 'notification');
    newNotification.css('opacity', 0);
    newNotificationHeader.attr('class', 'notificationHeader');
    newNotificationCloser.attr('class', 'notificationCloser');

    newNotificationMessage.attr('class', 'notificationMessage');
    newNotificationHeader.append(newNotificationCloser);
    newNotification.append(newNotificationHeader);
    newNotification.append(newNotificationMessage);
    $('body').append(newNotification);
    newNotification.animate({left: '10px', opacity:1}, 400).delay(15000).animate({top: '61px', opacity:0}, 500);
}
function closeNotification(notificationWindow) {
    notificationWindow.animate({top: '61px', opacity:0}, 500);
}

基本上，我正在尝试嵌套几个div，然后将它们附加到正文中。

我的 closeNotification（） 函数期待带有"通知"类的主div。 我无法使用 ID，因为在任何给定时间页面上都可能有多个通知。

<body>
    <div class="notification">
        <div class="notificationHeader">
            <div class="notificationCloser">
            </div>
        </div>
        <div class="notificationMessage">
        </div>
    </div>
</body>

我尝试在通知关闭者的点击代码中使用以下两种方法：

closeNotification($(this).parent().parent());

和

closeNotification($(this).parents().eq(1));

奇怪的是，这些似乎不起作用，但以下内容将隐藏身体：

closeNotification($(this).parent().parent().parent());

和

closeNotification($(this).parents().eq(2));

任何这方面的帮助将不胜感激。

快速回答：使用 .closest('.notification') 而不是 .parent() 。

但我想建议你一个不同的方法。使用模板将使推理和清理代码变得更加容易。

制作它们的一种简单方法是将它们包装在脚本标记中（使用未知类型，因此被忽略）

<body>
    <script type="text/template" id="notification-template">
        <div class="notification">
            <div class="header">
                <div class="close"></div>
            </div>
            <div class="message"></div>
        </div>
    </script>
</body>

（这适用于所有浏览器，但如果您不满意，您可以将 div.notification 元素扔到带有 display:none 的页面中并克隆它）

然后我们为通知对象创建一个构造函数：

function Notification(title, message){
    // create new DOM element based on the template
    var el = this.el = $(Notification.template);
    el.find('.header').text(title);
    el.find('.message').text(message);
    // close event handler, make sure `this` inside
    // the 'hide' function points to this Notification object
    el.find('.close').click($.proxy(this.hide, this));
}
// save the template code here once
Notification.template = $('#notification-template').text();
// methods
Notification.prototype = {
    show: function(){
        this.el.appendTo(document.body);
    },
    hide: function(){
        this.el.remove();
    }
};

可以这样使用：

var bacon_warning = new Notification("Out of bacon", "You've ran out of bacon");
bacon_warning.show();
相关文章：