jQuery:只针对“当前”div

Question

我有一系列重复的div，内容通过jQuery注入。顺便说一下，父div的数量是动态的，因此可以是随机的。

在每个div中，我有一个锚(H3 a)来触发一个模态窗口。我的问题是，每次单击目标元素时，注入父div的每个区段都会触发模态窗口。

因此，我的问题是，如何隔离每个父级，以便只使用当前的模式，而不必过度使用.eq()？

下面是触发模态窗口的脚本片段：

//prepend modal window to positive message container
jQuery('.rateRibbon').each(function () {
    jQuery(this).append('<div class="modelessWindow hideWindow">' + modWin1 + '</div>');
});

//remove class to show modeless window
jQuery('.posMsg a.showWindow').click(function (e) {
    jQuery('.modelessWindow.hideWindow').removeClass('hideWindow');
});

//add class to hide modeless window
jQuery('.modelessWindow a.closeModWin').click(function (e) {
    jQuery('.modelessWindow').addClass('hideWindow');
});

//when .roomTypeLineItem is clicked add class to hide nested modal window
jQuery('.roomTypeLineItem').click(function (e) {
    jQuery('.modelessWindow').addClass('hideWindow');
});

还有一个链接到我的小提琴和整个脚本。

提前感谢您的帮助！

Answer 1

使用第二个jQuery块：

jQuery('.posMsg a.showWindow').click(function (e) {
    jQuery(this).closest('.rateRibbon').find('.modelessWindow.hideWindow').removeClass('hideWindow');
});

jsFiddle实例

这使得单击相对于元素，并且只会选择适当的模式。