javascript - JQuery closest() + find() 树遍历

Question

给定这样的结构:

<div class="portlet">
    <div class="portlet-config">
        <p>Some configuration</p>
    </div>
    <div class="portlet-header">Configurable portlet</div>
    <div class="portlet-content">This has a configuration window. Click on pencil icon to open.</div>
</div>

首先，我将这些 DIV 附加到 portlet-header(以显示一些按钮)

<div class="portlet-button-container">
    <div class="portlet-button portlet-btn-delete ui-icon ui-icon-close"></div>
    <div class="portlet-button portlet-btn-toggle ui-icon ui-icon-minusthick"></div>
    <div class="portlet-button portlet-btn-config ui-icon ui-icon-pencil"></div>
</div>

然后我将 jquery-ui dialog() 插件应用到 portlet-config DIV

$(".portlet-config").dialog({
    autoOpen: false,
    show: {
        effect: "fade",
        duration: 200
    },
    hide: {
        effect: "fade",
        duration: 500
    },
    modal: true,
    buttons: {
        Ok: function () {
            $(this).dialog("close");
        }
    }
});

然后我添加点击处理程序

$(".portlet-btn-toggle").click(function () {
    var icon = $(this);
    icon.toggleClass("ui-icon-minusthick ui-icon-plusthick");
    icon.closest(".portlet").find(".portlet-content").toggle();
});

$(".portlet-btn-delete").click(function () {
    var icon = $(this);
    icon.closest(".portlet").hide();
});

$(".portlet-btn-config").click(function () {
    var icon = $(this);
    icon.closest(".portlet").find(".portlet-config").dialog("open");
});

当用户点击铅笔时，似乎找不到 portlet-config DIV。

更准确地说，似乎是:

$(this)                                             // OK, returns an object
$(this).closest(".portlet")                         // OK, returns an object
$(this).closest(".portlet").find(".portlet-config") // NOK, returns null

这是重现问题的 fiddle :http://jsfiddle.net/silenzioso/M6LmS/

提前致谢

Answer 1

您对 $(".portlet-config").dialog 的调用比您预期的要多一些。如果查看 DOM，可以看到 div 已从其原始位置移出并添加到文档的末尾。据推测，它这样做是为了叠加对话框效果。

您可以考虑在对话框 div 上放置一个唯一 ID，以便您可以再次找到它。也许您可以使用数据属性在按钮中存储关联的对话框 div ID。

<div class="portlet">
    <div class="portlet-config" id="dialog1">
        <p>Some configuration</p>
    </div>
    <div class='portlet-button' data-config="dialog1"></div>
</div>

...

var id = $(this).data('config');
var config = $('#'+id);