Javascript ID groupings

Question

I'm looking to create an exception which creates 2 groupds based on their .php ID numbers.

I currently have a form that fills a table of images, and want to split them into groups using javascript.

currently the script looks like this:

var currentResults;

function init() {
getProducts();}

function getProducts() {
$.ajax({
    url:"php/products.php",
    dataType: "json",
    data: { public: true },
    success:function(result){
        processResults(result);
    }
});}

function processResults(results) {
currentResults = null;

if (!results && !results.products) 
    return; 

currentResults = results.products;

for (var i = 0; i < results.products.length; i++) {
    processResult(results.products[i]);}

$(".galleryitem").click(handleThumbnailClick);}

function processResult(result) {
    var newDiv = '<div id="galleryitem' + result.id + '" class="galleryitem">';

    newDiv += '<div class="imageHover" style="background: ' + result.color + '">&nbsp;</div>';
    newDiv += '<img class="galleryImage" src="' + encodeImagePath(result.thumbnail) + '" />';

if (result.artist)
    newDiv +=   '<div class="imageArtist">' + result.artist + '</div>';

    newDiv += '</div>';

$('#gallery').append(newDiv);}

function handleThumbnailClick(e) {
    if (!e || !e.currentTarget || !e.currentTarget.id)
    return;

    var id = e.currentTarget.id.substring(11);

window.location = 'product.php?id=' + id;}

function encodeImagePath(path) {
return path.replace(/#/g, '%23');}

I am looking for some simple advice on how to split this into multiple div's based on the product's ID number to do sections of 6 images at a time with different header text.

please advise!! thanks much!

Answer 1

Not sure if I got your idea right but something like this should solve your problem (in case you have a "parent" property in the products JSON you're getting from the server):

function processResult(result) {
    if (typeof(result.parent) !== 'undefined') { // see if the element has a parent
        var newDiv = 'markup goes here'; // if some of the markup would be reused you can create a new function for this

        $('#galleryitem' + result.parent).append(newDiv); // just make sure the parent is already there
    } else {
        var newDiv = '<div id="galleryitem' + result.id + '" class="galleryitem">'; // default behavior that you alreay had

        // code skipped for brevity

        $('#gallery').append(newDiv);
    }
}

PS You should work on your code formatting -- it can be much easier to read if formatted well.