删除不活动的类项目 [英] Remove inactive class items

问题描述

我试图通过上传图片并将它们添加到容器中来创建 pagination ，方法是创建新 div 新的 id 并将 class 更改为当前

如果我更改为新页面，我将活动类移除到当前页面并将其添加到所选页面。

我想知道如何删除没有类current的所有无效页面

这是我的代码：

 < script type =text / javascript 
 var imagesPerPage = 4，pageNumber = 1; 
 
 function onAjaxSucceded（data）{
 var pagesContainer = $（'＃pagesContainer'），
 imagesInPage = 0，
 divPage = $（＃p1） ; 
 
 $ .each（data.result，function（index，file）{
 if（imagesInPage> = imagesPerPage）{
 imagesInPage = 1; 
 pageNumber + = 1; 
 divPage = $（'< div />'，{id：p+ pageNumber}）。addClass（'pagedemo'）。hide（）。appendTo（pagesContainer）; 
} else {
 imagesInPage + = 1; 
} 
 var src ='Uploads /'+ file.name; 
 $（'< img>'，{src： src，href：src，class：'LoadclickImage'，align：'left'}）appendTo（divPage）; 
}）; 
 
 $（＃demo5）。paginate（{
 count：pageNumber，
 start：1，
 display：Math.min（7，pageNumber） 
 border：true，
 border_color：'#fff'，
 text_color：'#fff'，
 background_color：'black'，
 border_hover_color：'#ccc' ，
 text_hover_color：'＃000'，
 background_hover_color：'#fff'，
图片：false，
 mouse：'press'，
 onChange：function ）{
 $（'＃paginationdemo ._current'）。removeClass（'_ current'）。hide（）; 
 $（'＃p'+ page）.addClass（'_ current'）。show ）; 
} 
}）; 
} 
 
 var fakeAjaxData = {
 result：[
 {name：'../../../img/keys.png'}，
 {name：'../../../img/logo.png'}，
 {name：'../../../img/input-button-bg.png '}，
 {name：'../../../img/remove-resources.png'}，
 {name：'../../../img/logo .png'}，
 {name：'../../../img/input-button-bg.png'}，
 {name：'../../ .. /img/remove-resources.png'}，
 {name：'../../../img/keys.png'}，
 {name：'../../ ../img/keys.png'}，
 {name：'../../../img/input-button-bg.png'}，
 {name：'.. /../../img/logo.png'}，
 {name：'../../../img/remove-resources.png'}，
 {name：' ../../../img/keys.png'}，
 {name：'../../../img/keys.png'}，
 {name：' ../../../img/input-button-bg.png'}，
 {name：'../../../img/logo.png'}，
 {name：'../../../img/remove-resources.png'}，
 {name：'../../../img/input-button-bg.png' }，
 {name：'../../../img/logo.png'}，
] 
}; 
 
 $（function（）{
 onAjaxSucceded（fakeAjaxData）; 
}）; 
< / script> 
  

这是我的演示

EDIT ：

删除 非活动类可以任何人说我如何删除所有的页面，如果我再次添加我需要添加第一页的图像。从现在起，如果我从最后添加的页面中删除它添加的页面。

如果我的标签错误，请原谅。

解决方案

这样：

  $（＃pagesContainer>：not（._ current））。remove（）
  
I am trying to make a pagination as shown below by uploading images and adding them to a container by creating new div with new id's and giving class as current for the first page.

If I change to the new page I remove the active class to the current page and add it to the selected page.

I would like to know how do I remove all the inactive pages which do not have class "current"

Here's my code:
<script type="text/javascript">
var imagesPerPage = 4, pageNumber = 1;

function onAjaxSucceded(data) {
    var pagesContainer = $('#pagesContainer'),
        imagesInPage = 0,
        divPage = $("#p1");

    $.each(data.result, function(index, file) {
        if (imagesInPage >= imagesPerPage) {
            imagesInPage = 1;
            pageNumber += 1;
            divPage = $('<div/>', {id : "p" + pageNumber}).addClass('pagedemo').hide().appendTo(pagesContainer);
        } else {
            imagesInPage += 1;
        }
        var src = 'Uploads/' + file.name;
        $('<img>', {src: src, href: src, "class": 'LoadclickImage', align: 'left'}).appendTo(divPage);
    });

    $("#demo5").paginate({
        count: pageNumber,
        start: 1,
        display: Math.min(7, pageNumber),
        border: true,
        border_color: '#fff',
        text_color: '#fff',
        background_color: 'black',
        border_hover_color: '#ccc',
        text_hover_color: '#000',
        background_hover_color: '#fff',
        images: false,
        mouse: 'press',
        onChange: function(page) {
            $('#paginationdemo ._current').removeClass('_current').hide();
            $('#p' + page).addClass('_current').show();
        }
    });
}

var fakeAjaxData = {
    result: [
        {name: '../../../img/keys.png'},
        {name: '../../../img/logo.png'},
        {name: '../../../img/input-button-bg.png'},
        {name: '../../../img/remove-resources.png'},
        {name: '../../../img/logo.png'},
        {name: '../../../img/input-button-bg.png'},
        {name: '../../../img/remove-resources.png'},
        {name: '../../../img/keys.png'},
        {name: '../../../img/keys.png'},
        {name: '../../../img/input-button-bg.png'},
        {name: '../../../img/logo.png'},
        {name: '../../../img/remove-resources.png'},
        {name: '../../../img/keys.png'},
        {name: '../../../img/keys.png'},
        {name: '../../../img/input-button-bg.png'},
        {name: '../../../img/logo.png'},
        {name: '../../../img/remove-resources.png'},
        {name: '../../../img/input-button-bg.png'},
        {name: '../../../img/logo.png'},
    ]
};

$(function() {
    onAjaxSucceded(fakeAjaxData);
});
</script>
Here's my demo

EDIT:

Instead of removing inactive class can anyone say me how do I remove all the pages and If I add again I need to add images from the 1st page. as of now If I remove the pages it's adding from the last page it has added.

Excuse me if my tags are wrong.
解决方案
Something like this:
$("#pagesContainer > :not(._current)").remove()


                        
这篇关于删除不活动的类项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！