JQuery найти не работает при цикле через переменную

Question

JQuery найти не работает при цикле через переменную

0

Я не вижу, что случилось со следующей функцией javascript.

function tapHandler( tabId, divContents ){

    var activeTab = divContents.find('.active-tab-content');    
    if(activeTab.length > 0){
        activeTab.removeClass('active-tab-content').addClass('tab-content');
    }   
    divContents.children('#'+tabId+'-tcontent').addClass('active-tab-content').removeClass('tab-content');

}

Функция поиска jquery не работает (и я боюсь, что это может быть моя ошибка).

Когда я заменяю тело предыдущей функции на

divContents.each(function(){

    //Clicked tab : Add class active-tab-content
    if(this.id == tabId + "-tcontent"){

        $(this).addClass("active-tab-content").removeClass('tab-content');

    //For the others, if was active before, remove active-tab-content           
    }else{

        if($(this).hasClass("active-tab-content")){
            $(this).removeClass("active-tab-content").addClass('tab-content');  
        }           
    }
});

Оно работает. Это означает, что каждый класс css, который я искал в первой версии функции, существует. Но я не могу его найти. Функция вызывается отсюда:

$( document ).ready(function() {


    $(".tabs-container").each(function() {

        //Get tab content
        var tabsContent  = $( this ).children( ".tc-holder" ).find('.tab-content');

        //Get tabs
        var tabsMenu =  $( this ).children( ".tab-set" ).find('.tab');;


        tabsMenu.each(function () {

            $( this).click( function(){
                tapHandler(this.id, tabsContent);
            });

        });         
    }); 
});

И код HTML:

            <div class="tabs-container">

                <div data-role="navbar" class="tab-set">

                        <ul>
                            <li id="firstTab" class="tab"><a href="#firstTab-tcontent">One</a></li>
                            <li id="secondTab" class="tab"><a href="#secondTab-tcontent">Two</a></li>
                            <li id="thirdTab" class="tab"><a href="#thirdTab-tcontent">Three</a></li>                           
                        </ul>

                </div><!-- /navbar -->


                <div class="tc-holder">

                    <div id="firstTab-tcontent" class="tab-content">
                        First tab               
                    </div>
                    <div id="secondTab-tcontent" class="tab-content">
                        Second Tab              
                    </div>
                    <div id="thirdTab-tcontent" class="tab-content">
                        Third Tab               
                    </div>

                </div>

            </div>

заранее спасибо

MiGU 02 дек. 2013, в 10:20

Источник

Теги:

class

jquery

find

1 ответ

Ещё вопросы

Ja͢ck · Accepted Answer · 2013-12-02T06-29-00.000Z

Это не работает, потому что divContents внутри вашего обработчика divContents эффективно:

$('.tabs-container').children(".tc-holder").find('.tab-content');

Приведенное выше возвращает массив дочерних узлов вместо массива, содержащего единственный родительский узел, в котором вы можете найти дочерние узлы; для поиска массива, который вам нужно использовать .filter() вместо .find():

var activeTab = divContents.filter('.active-tab-content');

Кроме того, я бы предложил упростить регистрационный код обработчика событий:

tabsMenu.on('click', function() {
    tapHandler(this.id, tabsContent);
});

Ладно ладно! Вы правы. Итак, корневой узел отсутствовал, и поэтому я не могу использовать фильтр. Я также изменил регистрационный код обработчика. Еще раз спасибо. Я уже принял и проголосовал ваш ответ :-D
@MiGU Да, ему не хватало общего родительского узла :) рад, что помог!