jQuery get() is Destructive

Drupal Views Variable Height Content Going Horizontal.

I had the disturbing task of creating a 3-column Homepage layout with nodes of varying height. The challenge here is that floating this content with CSS forces the left columns to have huge blocks of whitespace or empty "real estate" as the CSS engine tries to fill space to the right.

Since the desired effect of "most recent content on the top", multiple views or views displays were for the most part out of the question.

I ultimately used jQuery to move content into the other columns but quickly learned that getting content from one array to populate another is destructive to the original object. Each time you 'get()' content for the target object, said content is removed from original object... changing the size of the original array and thereby changing what indices are available to it for stepping through.

I tried this with a for loop, jQuery's Each method, and one other way.. Stepping straight through from 0 up, using modulus to choose which resulting array should receive the current node.


Instead, choose the same modulus operation but stepping down instead. Choosing content is STILL destructive as the content is still removed from the source jQuery object. However, the indices of all of the content you haven't visited yet will remain the same.

Conclusion, if you need to step through some content using jQuery, with the sole purpose of selectively moving that content to other objects, then step through it backwards calling the .prepend() method to keep the original content order.

a bit of code:

    if (i%3 == 0) {
    if (i%3 == 1) {
      $('#block-views-hp_items_standard-block_2 .view-content').prepend($('#block-views-hp_items_standard-block_1 .views-row').get(i));
    if (i%3 == 2) {
      $('#block-views-hp_items_standard-block_3 .view-content').prepend($('#block-views-hp_items_standard-block_1 .views-row').get(i));