jQuery 'not' function giving spurious results

Made a fiddle: http://jsfiddle.net/n6ub3/

I'm aware that the code has a LOT of repeating in it, its on the list to refactor once functionality is correct.

The behaviour i'm trying to achieve is if there is no selectedTab on page load, set the first tab in each group to selectedTab. If there is a selectedTab present, then use this as the default shown div.

However, as you can see 开发者_运维技巧from the fiddle its not working as planned!

If anyone has any ideas how to refactor this code down that'd be great also!

Change

 if($('.tabs1 .tabTrigger:not(.selectedTab)')){
                $('.tabs1 .tabTrigger:first').addClass('selectedTab');
        }

to

if ( !$('.tabs1 .tabTrigger.selectedTab').length ) {
    $('.tabs1 .tabTrigger:first').addClass('selectedTab');
}

Demo at http://jsfiddle.net/n6ub3/1/

They way you are doing it (the first code part) you are adding the .selectedTab class if there is at least one of the tabs in that group that is not selected at start .. (that means always)

Update

For a shortened version look at http://jsfiddle.net/n6ub3/7/

Your selector are doing exactly what you're writing them for.

$('.tabs3 .tabTrigger:not(.selectedTab)') is true has long as there is at least one tab that has not the selected tab (so always true in your test case).

So you should change the logic to !$('.tabs3 .tabTrigger.selectedTab').length which is true only if there are no selectedTab

WORKING DEMO with simplified code

$('.tabContent').hide();

$('.tabs').each(function(){
    var search = $(this).find('div.selectedTab').length;
    if( search === 0){
        $(this).find('.tabTrigger').eq(0).addClass('selectedTab')
    }

    var selectedIndex = $(this).find('.selectedTab').index();
    $(this).find('.tabContent').eq(selectedIndex).show();
});

$('.tabTrigger').click(function(){
   var ind = $(this).index();
    $(this).addClass('selectedTab').siblings().removeClass('selectedTab');
   $(this).parent().find('.tabContent').eq(ind).fadeIn(700).siblings('.tabContent').hide();   
});

That's all! You don't need all that ID's all around. Look at the demo!

With a couple of very minor changes you code can be reduced to:

$('.tabContent').hide();

$('.tabs').each(function(){
    if($('.tabTrigger.selectedTab',$(this)).length < 1)
        $('.tabTrigger:first').addClass('selectedTab');
});

$('.tabTrigger').click(function(){
   var content = $(this).data('content');
   $(this).parents('div').children('.tabContent').hide();
   $(this).parents('div').children('.tabTrigger').removeClass('selectedTab');
   $(this).addClass('selectedTab');
   $('#' + content).show();
});


$('.tabTrigger.selectedTab').click();

Those changes are

1. Change the class on the surrounding div to just class="tabs.
2. Add a data-content attribute with the name of the associated content div

Live example: http://jsfiddle.net/gsTBQ/

Well, I'm a bit behind the times obviously; but, here's my updated version of your demo...

I have updated your fiddle as in the following fiddle: http://jsfiddle.net/4y3Xp/1/.

Basically I just tidied it up a bit, and to refactor I put everything in a separate function instead of having each of the cases in their own. This is basically just putting a new function in that does similar to what yours was doing (e.g. not modifying your HTML model), but I tried to clean it up a bit, and I also just made a function that took the tab number and did each of the items that way rather than needing a separate copy for each.

The main issue with the 'not' part of your query is that the function doesn't return a boolean; like all JQuery queries, it's returning all matching nodes. I just updated that part to return whether .selected was returning more than 0 results; if not, I go ahead and call the code to select the first panel.

Glad you got your problem resolved :)

$(document).ready(function(){
var HandleOne = function (i) {
    var idxString = i.toString();
    var tabName = '.tabs' + idxString;
    var tabContent = tabName + ' .tabContent';

    $(tabContent).hide();

    var hasSelected = $(tabName + ' .tabTrigger.selectedTab').length > 0;
    if (!hasSelected)
        $(tabName + ' .tabTrigger:first').addClass('selectedTab');

    var selectedTabId = 
        $(tabName + ' .tabTrigger.selectedTab').attr('id');

    var selectedContentId = selectedTabId.replace('tab','content');
    $('#' + selectedContentId).show();

    $(tabName + ' .tabTrigger').click(function() {
        $(tabName + ' .tabTrigger').removeClass('selectedTab');
        $(tabName + ' .tabContent').hide();

        $(this).addClass('selectedTab');
        var newContentId = $(this).attr('id').replace('tab','content');
        $('#' + newContentId).show();
    });
}

HandleOne(1);
HandleOne(2);
HandleOne(3);
});