Question

抱歉，我是jQuery的新手。所以我有这个jQuery代码，带有两个if else语句，我想要合并，因为我觉得这是一个不必要的重复。它们有些不同的代码，因为一次代理ul#tabs li a而另一代代理ul.tabs li a。如何合并它们以提高性能？这是代码：

$(document).ready(function() 
{
    var hash = location.hash;

    $(".tab_content").hide(); //Hide all content

    if ($("ul#tabs li a[href='" + hash + "']").length) 
    { 
        $("ul#tabs li a[href='" + hash + "']")
            .addClass("active")
            .parent()
            .addClass("active"); //Activate tab

        $(hash).show();
    }
    else 
    {
        do stuff
    }  

    if ($("ul.tabs li a[href='" + hash + "']").length) 
    {
        $("ul.tabs li a[href='" + hash + "']")
            .addClass("active")
            .parent()
            .addClass("active"); //Activate tab

        $(hash).show();
    }
    else 
    {
        do stuff
    }  
});

如何合并这两个代码？

Answer 1

逗号运算符,在CSS和jQuery中用于指定多个选择器：

    var sel = $("ul.tabs li a[href='" + hash + "'], ul#tabs li a[href='" + hash + "']");
    if (sel.length) { 
        sel.addClass("active").parent().addClass("active"); //Activate tab
        $(hash).show();
    }
    else {
        do stuff
    }

您可以进一步减少重复：

var sel = $("ul.tabs, ul#tabs").find("li a[href='" + hash + "']");
....

Answer 2

You could utilize multiple selectors with a comma：

if ($("ul.tabs li a[href='" + hash + "'], ul#tabs li a[href='" + hash + "'] ").length) {

对于您的情况，您可以使用each()方法：

var el = $("ul.tabs li a[href='" + hash + "'], ul#tabs li a[href='" + hash + "']");

if(el.length) {
    el.each(function() {
        $(this).addClass("active").parent().addClass("active");
        $(hash).show();
    }); 
} else {
   // do else stuff
}

合并这两个if ... else语句

2 个答案: