删除jQuery中除某些元素外的所有元素

Question

Consider the following page layout:

<div id="page-container" class="">
<div id="scroller">
<!-- This page should be removed -->
    <div id="page_1" class="pagina"></div>
<!-- These pages should be kept -->
    <div id="page_2" class="pagina"></div>
    <div id="page_3" class="pagina"></div>
<!-- This is the current page -->
    <div id="page_4" class="pagina"></div>
<!-- These pages should be kept -->
    <div id="page_5" class="pagina"></div>
    <div id="page_6" class="pagina"></div>
<!-- These pages AND everything that follows should be removed -->
    <div id="page_7" class="pagina"></div>
    <div id="page_8" class="pagina"></div>

</div>
</div>

I have a function loadPage(pageNr) which loads a specific page and scrolls it into view.

I also have a function that load's two more pages on top, or below the current page depending on the scroll direction.

What I want to achieve now, is that when my loadPage() function is called, I want to keep 2 pages below and before the current page. All other pages should be removed. This is for speed purposes as my app has 748 pages in total.

What I have tried:

//Determine which pages on top of current page should be kept
var firstPageToKeep = (pageNr - 2);

//Delete every page on top that should not be kept in memory
for(x=0;x<firstPageToKeep;x++) {
console.log('x: '+x);
     $('#page_'+x).remove();
}

//=================================

//Determine which pages below current page should be kept
var lastPageToKeep = (pageNr + 2);

//Delete every page below current page that should not be kept in memory
for(y=0;y<lastPageToKeep;y++) {
     $('#page_'+y).remove();
}

This does remove every page except the current page. I believe I have set the limits of which pages should be deleted and which not. Why is everything deleted except the current page?

Answer 1

Try this code:

$('.pagina').each(function(i, page) {
    if ((i < pageNr - 3) || (i > pageNr + 1)) {
        $(page).remove();
    }
});

http://jsfiddle.net/6NCmR/

Answer 2

尝试这个：

$("#scroller").children().not("#id1 #id2 ...").each(function(){//Your code});

Answer 3

My quick guess is, that your last for-loop deletes all pages up to lastPageToKeep, keeping only the last pages. You should iterate beginning from lastPageToKeep+1 up to the maximum number of pages.

Nevertheless I'd recommend to you the :lt and :gt selectors from jQuery!

I made a quick fiddle for you demonstrating the use: http://jsfiddle.net/d6tZ6/

---

Note: As a side effect this will also remove the neccessity for having an ID for each page.