Question

我有一个有这种效果的布局：

<div id="issueWidgets">
   <div class="column">
      <div class="portlet" id="boxIssues">
            <div class="portlet-header">Some Title</div>
                   <div class="portlet-content">Some content</div>
      </div>
   </div>
   <div class="column">
         <div class="portlet" id="boxStats">
            <div class="portlet-header">Some Stats Title</div>
                   <div class="portlet-content">Some Stats content</div>
         </div>
   </div>
</div>

<div id="projectWidgets">
   <div class="column">
      <div class="portlet" id="boxProjects">
            <div class="portlet-header">Some Title</div>
                   <div class="portlet-content">Some content</div>
      </div>
   </div>
</div>

<div id="userWidgets">
   <div class="column">
      <div class="portlet" id="boxUsers">
            <div class="portlet-header">Some Title</div>
                   <div class="portlet-content">Some content</div>
      </div>
   </div>
   <div class="column">
      <div class="portlet" id="boxUsers2">
            <div class="portlet-header">Some Title</div>
                   <div class="portlet-content">Some content</div>
      </div>
   </div>
</div>

然后......每个主要div作为jquery ui tab。所以基本上我有标签（作为具有以下ID的div：issueWidgets，projectWidgets和userWidgets）。这些div包含一些portlet div（这些div只是在每列中充当小部件的div（div class = column）。

我有代码查找每个具有name列的类，以创建一些cookie信息，如下所示：

  // function that writes the list order to a cookie 
        function saveOrder() { 
            $(".column").each(function(index, value){ 
                var colid = value.id; 
                var cookieName = "cookie-" + colid; 
                // Get the order for this column. 
                var order = $('#' + colid).sortable("toArray"); 
                // For each portlet in the column 
                for ( var i = 0, n = order.length; i < n; i++ ) { 
                    // Determine if it is 'opened' or 'closed' 
                    var v = $('#' + order[i]).find('.portlet-content').is(':visible'); 
                    // Modify the array we're saving to indicate what's open and 
                    //  what's not. 
                    order[i] = order[i] + ":" + v; 
                } 
                $.cookie(cookieName, order, { path: "/", expiry: new Date(2016, 1, 1)}); 
            }); 
        }

我遇到的问题是每个带有类名列的元素都会运行。所以基本上它发布了widget并查找每一列，然后转到projectWidget并找到任何带有class = column的元素，最后找到userWidgets并找到任何带有class = column的元素并运行上面的代码。

我想将其限制为基于其父窗口小部件div运行。因此，例如，当我查看issueWidgets选项卡时，我希望它仅在issueWidgets上运行。记住这些实际上是制表符（jquery ui）。如果我在projectWidgets选项卡中，我想找到所有带有class = column的元素，但是只能在projectWidgets选项卡上查找并不是所有其他选项卡......等等。

所以基本上我的函数应该在选项卡中使用issueWidgets，projectWidgets，userWidgets和work.each，它们只位于这些选项卡中。

修改

我不知道如何修改它以使用find（），因为文档中的原始代码就像这样：

 $(".column").sortable({
                connectWith: ".column",
                handle: ".portlet-header",
                cancel: ".portlet-toggle",
                placeholder: "portlet-placeholder ui-corner-all",
                stop: function () { saveOrder(); }
            });

            $(".portlet")
                .addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
                .find(".portlet-header")
                .addClass("ui-widget-header ui-corner-all")
                .prepend("<span class='ui-icon ui-icon-minusthick portlet-toggle'></span>")
                .end()
                .find(".portlet-content");

            restoreOrder();

            $(".portlet-header .ui-icon").hover(
                function () { $(this).addClass("ui-icon-hover"); },
                function () { $(this).removeClass('ui-icon-hover'); }
            );

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

Answer 1

访问该元素的父级并进行比较。

$(".column").each(function(index, value){ 

   // If isn't the parent you're looking for.. 
   if($(this).parent().attr('id') != 'projectWidgets'){
      continue;
   }

   // the rest of your code
}

编辑：根据以下答案，新代码：

我假设你发布的代码（var selectedTabIndex = $('#tabs').tabs('option', 'active');）给出了HTML内容，对吗？

如果是这样，请使用以下内容：

$tabSelected = $('#tabs').tabs('option', 'active');

您需要做的就是find .column。

$tabSelected.find('.column').each(function(index, value){

});

编辑2 ：根据jQuery Tab文档：

由于激活事件仅在选项卡激活时触发，因此不会在创建选项卡窗口小部件时为初始选项卡触发。如果你需要用于创建窗口小部件的钩子使用创建事件。

所以，请注意，您可能还需要create事件。下面的代码可以解决问题。

$('#tabs').tabs({
  activate: function(event, ui){

    $(this).find('.column').each(function(i, value){

    });
  }
});

根据特定选项卡中的元素运行.each（）

修改

1 个答案: