jQuery Schnitt div nach n-ten Intervall pro Klick?

Question

Ich möchte in der Lage sein, meine Divs in n-ten Intervallen pro Klick zu schneiden. In diesem Beispiel möchte ich bei jedem Klick, dass meine Funktion die ersten drei Divs schneidet und sie ausblendet. Und wenn ich noch einmal klicke, dann verstecke die restlichen drei Divs.

$(document).on('click', '#dinner', function(){ 
var command = $(this).parents('#theworld'); 
var findpizza = command.find('.pizza'); 
for (var i = 0; i < findpizza.length; i+=3){ 
findpizza.slice(0, 3).hide();} 
});  

JSFiddle: https://jsfiddle.net/crhggho5/

Ich möchte entfernen nicht verwenden, da dies die div versteckt permanent macht. Ich möchte auch nicht display:none verwenden, da das div immer noch sichtbar ist, und es wird nichts nach dem ersten Klick tun.

Answer 1

Ich sehe Sie versucht, eine Klasse zu verwenden, um das div zu verbergen. Das würde ich tun. Auf diese Weise können Sie die .gone Klasse in Ihrem Selektor diejenigen ausschließen, die Sie bereits versteckt haben, wenn das Ereignis Hörer wieder getroffen wird:

$(document).on('click', '#dinner', function(){ 
    var command = $(this).parents('#theworld'); 

    //only get the slices that are not hidden 
    var findpizza = command.find(".pizza:not('.gone')"); 

    for (var i = 0; i < findpizza.length; i+=3){ 
     //hide the slices via a class with 'display: none' 
     findpizza.slice(0, 3).addClass('gone'); 
    } 
});  

Answer 2

erstellen Nur 2 Indizes für die Verfolgung von sliceStart & sliceEnd.

Nach jedem Schneidezyklus setzen Sie den sliceEnd Index auf sliceStart, um die divs zu suchen.

JS Code:

var sliceStart = 0; 
var sliceEnd = 3; 
$(document).on('click', '#dinner', function() { 
    var command = $(this).parents('#theworld'); 
    var findpizza = command.find('.pizza'); 
    if (sliceStart != sliceEnd) { 
     findpizza.slice(sliceStart, sliceEnd).hide(); 
     sliceStart = sliceEnd; 
     sliceEnd += sliceEnd; 
     return; 
    } 

    //detach the click event when job is done to 
    //avoid unnecessary event handling 
    if (sliceStart === totalDivs) { 
    $(document).off('click'); 
    } 
}); 

Live Demo @ JSFiddle

Hinweis: FYI jquery .hide() intern setzt die CSS-Style disply:none auf das Zielelement, so ist es wirklich nicht anders disply:none von der Einstellung der CSS-Style manuell auf das jeweilige Element