如果显示 errorLable 如何选择 jquery 选项卡

Question

我准备将 jquery UI 选项卡应用到我的应用程序，并且我将在其上应用 jquery 验证类。我的问题是，如果我在某些 div 中出现错误，则应选择该 div 并在单击“保存”按钮时向用户显示错误。

我尝试过

 $('#tabs > div').each(function(i){
                   if($('.errortd', this).not(':hidden').length>0){
                                $("#tabs").tabs('select', i);                                              

                      });

               });

但我没有运气任何帮助谢谢很多

我的选项卡div

    <div id="tabs">
           <ul>
            <li><a href="#editEmployeeDIV"><?php echo __("View/Edit employees") ?></a></li>
            <li><a href="#addEmployeeDIV"><?php echo __("Assign new employees") ?></a></li>
           </ul>
    <div id="editEmployeeDIV">
    </div>
    <div id="editEmployeeDIV">
    </div> 
</div>

我的错误标签有类errortd

<label for="txtAmount_146" generated="true" class="errortd" style="display: none; ">This field is required.</label>

Answer 1

你有一些问题。

第一个是代码中的杂散 );：

if($('.errortd', this).not(':hidden').length>0){
    $("#tabs").tabs('select', i);                                              
}); // <------ Right here

那么您就在不应该使用的时候使用了 :hidden 。来自精细手册：

由于多种原因，元素可以被视为隐藏：
[...]

• 祖先元素被隐藏，因此该元素不会显示在页面上。

这意味着如果 位于非当前选项卡中，则始终将其视为隐藏。

你可以这样做：

var $shown = $(this).find('.errortd').filter(function() {
    var dpy = $(this).css('display');
    return !dpy || dpy != 'none';
});
if($shown.length > 0)
    $("#tabs").tabs('select', i);

演示： http://jsfiddle.net/ambigously/agrCe/

或者，向 元素添加一个类来隐藏它们，而不是手动隐藏它们。你有一些像这样的CSS：

.no-error {
    display: none;
}

然后：

if($(this).find('.errortd:not(.no-error)').length > 0)
    $("#tabs").tabs('select', i);

演示： http://jsfiddle.net/ambigously/Z4D2A/