x.nextUntil ist keine Funktion - nicht sicher warum

Question

Ich bekomme den folgenden Fehler jedes Mal, wenn ich auf einen Tab klicke ... die Tabs funktionieren gut, aber sind einige Usability-Probleme mit ihnen für mobile, so dass dies die Ursache ist. Wenn nicht, müssen Sie trotzdem irgendwelche Fehler beheben. Ich erhalte:

Uncaught TypeError: x.nextUntil is not a function

Abschnitt von Code ... können alle, wenn nötig ... tatsächlich alle bieten so ist es hier:

$ (document) .ready (function() {

var originalTabs = $('.originalTabs').html(); 

function clearTabs() { 
    $('.originalTabs').html(originalTabs); 
} 

//clearTabs(); 
//desktopTabs(); 

function desktopTabs() { 
    clearTabs(); 

    // cretate tabs for desktop 
    var headers = $("#tab_description h6"); 

    $('#tab_description h6').each(function(i) { 
    $(this).nextUntil("h6").andSelf().wrapAll('<div class="tab" id="tab-' + i + '"/>'); 
    }); 

    for (var i = 0; i < headers.length; i++) { 
    $('.tabs').append('<li class=""><a href="#tab-' + i + '">' + headers[i].innerHTML + '</a></li>'); 
    } 

    $('ul.tabs').each(function() { 
    var active, content, links = $(this).find('a'); 
    var listitem = $(this).find('li'); 
    active = listitem.first().addClass('active'); 
    content = $(active.attr('href')); 
    $('.tab').hide(); 
    $(this).find('a').click(function(e) { 
     $('.tab').hide(); 
     $('ul.tabs li').removeClass('active'); 
     content.hide(); 
     active = $(this); 
     content = $($(this).attr('href')); 
     active.parent().addClass('active'); 
     content.show(); 
     return false; 
    }); 
    }); 

    headers.remove(); // remove headers from description 
    $('#tab-0').show(); // show the first tab 
} 

function mobileTabs() { 
    clearTabs(); 

    //alert("loaded mobile"); 

    var headers = $("#tab_description h6"); 

    $(headers).each(function(i) { 
    $(this).append('<a href="#accordion_' + (i + 1) + '" id="accordion_' + (i + 1) + '"></a>'); 
    //$(this).nextUntil("h6").andSelf().wrapAll('<div class="aTab" id="tab-'+i+'"/>'); 
    $(this).on('click', function() { 
     tabClick($(this)); 
    }); 
    }); 

    $('#tab_description h6').first().trigger('click').addClass("active"); 
    $('#tab_description h6').first().nextUntil("h6").show(); 
} 

var tabClick = function(x) { 

    //alert("clicked"); 
    var accordionContent = $('#tab_description p, #tab_description ul, #tab_description table, #tab_description div'); 

    $('#tab_description h6').removeClass("active"); 
    if (!$(x).hasClass("active")) { 
    $(x).addClass("active"); 
    } 

    // Check if current accordion item is open 
    var isOpen = $(x).next().is(":visible"); 

    // Hide all accordion items 
    accordionContent.hide(); 

    // Open accordion item if previously closed 
    if (!isOpen) { 
    x.nextUntil('h6').show(); 
    x.nextUntil(accordionContent).show(); 
    } 

    // Disabled to stop on mobile auto scrolling down to product description when clicking through... 
    //$('html, body').animate({ 
    // scrollTop: $(x).offset().top - 15 
    //}, 2000); 

    //return false; 
} 

//bind to resize 
$(window).resize(function() { 
    if (isMobileLandscapeOnly.matches || isTabletLandscapeOnly.matches) { 
    desktopTabs(); 
    $('#tab_description h6').on("click, touchstart", tabClick); 

    } else if (isMobilePortraitOnly.matches || isTabletPortraitOnly.matches) { 
    mobileTabs(); 
    $('#tab_description h6').on("click, touchstart", tabClick); 

    } else if (isDesktop) { 
    desktopTabs(); 
    } 
}); 

//check for the orientation event and bind accordingly 
window.addEventListener("orientationchange", function() { 
    if (isMobileLandscapeOnly.matches || isTabletLandscapeOnly.matches) { 
    desktopTabs(); 
    $('#tab_description h6').on("click, touchstart", tabClick); 

    } else if (isMobilePortraitOnly.matches || isTabletPortraitOnly.matches) { 
    mobileTabs(); 
    $('#tab_description h6').on("click, touchstart", tabClick); 

    } else if (isDesktop) { 
    desktopTabs(); 
    } 
}, false); 

if (isMobileLandscapeOnly.matches || isTabletLandscapeOnly.matches) { 
    //alert("Mobile/Tablet (Portrait)"); 
    desktopTabs(); 
    $('#tab_description h6').on("click, touchstart", tabClick); 

    //console.log(originalTabs); 
} else if (isMobilePortraitOnly.matches || isTabletPortraitOnly.matches) { 
    //alert("Mobile/Tablet (Portrait)"); 
    mobileTabs(); 
    $('#tab_description h6').on("click, touchstart", tabClick); 

} else if (isDesktop) { 
    //alert("Desktop"); 
    desktopTabs(); 
} 

}); 

Teil in Frage (glaube ich)

// Open accordion item if previously closed 
if (!isOpen) { 
    x.nextUntil('h6').show(); 
    x.nextUntil(accordionContent).show(); 
} 

Stripped HTML nach unten ...

<div id="tab_description"> 
    <h6 class="active"><span>TAB 1</span><a href="#accordion_1" id="accordion_1"></a></h6> 
    <p style="display: block;">TESTING CONTENT</p> 
    <h6 class=""><span>TAB 2</span><a href="#accordion_2" id="accordion_2"></a></h6> 
    <p style="display: none;">TESTING CONTENT</p> 
    <h6 class=""><span>TAB 3</span><a href="#accordion_3" id="accordion_3"></a></h6> 
    <p style="display: none;">TESTING CONTENT</p> 
    <h6 class=""><span>TAB 4</span><a href="#accordion_4" id="accordion_4"></a></h6> 
    <p style="display: none;">TESTING CONTENT</p> 
</div> 

Irgendwelche Ideen jemand?

Answer 1

x.nextUntil('h6').show(); 
x.nextUntil(accordionContent).show(); 

sollte sein:

$(x).nextUntil('h6').show(); 
$(x).nextUntil(accordionContent).show(); 

Noch besser wäre es var $x = $(x); an die Spitze der tabClick hinzufügen und $x statt $(x), so dass Sie nicht ständig eine andere jquery Instanz zu bekommen.