PHP jQuery: Append () к вкладкам дублирует содержимое до тех пор, пока вкладки не будут пересмотрены

Question

У меня проблема с добавлением контента на 3 вкладки, которые являются частью одного контейнера. По какой-то причине, когда я добавляю элементы в контейнер каждой вкладки, я получаю дубликаты на каждой вкладке, пока не нажму на эту вкладку и не вернусь снова.

Вот пример того, как я пытаюсь это сделать.

Вкладка

<div class="tab-content">
    <div class="tab-pane active" id="tabs1" role="tabpanel">
        <div id="container1" class="widget">
        </div>
    </div>
    <div class="tab-pane active" id="tabs2" role="tabpanel">
        <div id="container2" class="widget">
        </div>
    </div>
    <div class="tab-pane active" id="tabs3" role="tabpanel">
        <div id="container3" class="widget">
        </div>
    </div>
</div>

ДАННЫЕ И СОДЕРЖАНИЕ

$.ajax({
    url: 'data.php',
    type: 'post',
    dataType: 'json',
    data: {id: id},
    success: function(res){

        var len = res.length;

        $("#container1").empty();
        $("#container2").empty();
        $("#container3").empty();

        for( var i = 0; i<len; i++){

        var content = res[i]['content'];
        var isValid = res[i]['isValid']; //boolean

        $('#container1').append('<div>'+content+'</div>'); //this tab includes all results

        if(isValid){
        $('#container2').append('<div>'+content+'</div>'); //this tab includes only valid results
        }

        if(!isValid){
        $('#container3').append('<div>'+content+'</div>'); //this tab includes only invalid results
        }
    }
});

Этот пример указывает, что все данные находятся в одном массиве и затем условно добавляются к каждому контейнеру.

Итак, когда я впервые посещаю каждую вкладку, я вижу следующее.

"container1" показывает все, но также дублирует все дважды. (поэтому, если я ожидаю 1 результат для каждой вкладки, то на container1 должно отображаться 3 результата, но вместо этого отображается 6 (по 2 каждого). Другими словами, он отображает контент, предназначенный для container1, но также контент, предназначенный для container2 и container3. .

«container2» отображает содержимое из «container2» и «container3» до тех пор, пока вкладка не будет пересмотрена, а затем показывает правильное содержимое.

«container3» отображает содержимое из «container2» и «container3» до тех пор, пока вкладка не будет пересмотрена, а затем показывает правильное содержимое.

при повторном посещении каждой вкладки я вижу уникальный контент для каждой.

Я попытался извлечь данные из разных массивов (разделив их на стороне сервера), но все же получил тот же конечный результат.

Чего я не понимаю, так это того, что дубликаты исчезают при повторном посещении вкладок.

Заранее спасибо,

Answer 1

Поскольку у меня нет реализации вашего элемента управления вкладками, я могу только предположить, но я думаю, что это связано с тем фактом, что все ваши вкладки имеют класс .active, который будет отображать все три вкладки одновременно.Например, если в вашем списке 6 элементов с 2 действительными записями и 4 недействительными один раз, вы увидите всего 12 элементов, но они появятся на трех разных вкладках DIV ниже друг друга.Если у вашего класса .widget нет внешней границы или другого разделителя, это может выглядеть так, как будто это всего лишь один элемент.

Измените его так, чтобы оставалась видимой только одна вкладка, например вкладка "tab1":

<div class="tab-content">
    <div class="tab-pane active" id="tabs1" role="tabpanel">
        <div id="container1" class="widget">
        </div>
    </div>
    <div class="tab-pane" id="tabs2" role="tabpanel">
        <div id="container2" class="widget">
        </div>
    </div>
    <div class="tab-pane" id="tabs3" role="tabpanel">
        <div id="container3" class="widget">
        </div>
    </div>
</div>