Question

Hi i would like to create an array from the title and src of an image set. Then append it to a list, then clear the array (the images in the set changes) then clear the array and the list. repeat it again and again as the images change in the set.

Here is the HTML:

<div id="imageholder">
  <img src="images/a001.png" title="orange"/>
  <img src="images/a002.png" title="red apple"/>
  <img src="images/a003.png" title="green apple"/>
  <img src="images/a004.png" title="red apple"/>
</div>
<ul id="list"></ul>

and here is the code:

  title_array = [];
  src_array = [];
function sumarychange() {
  $("#imageholder img").each(function() {

// pushing each values into arrays
    title_array.push($(this).attr("title"));
    src_array.push($(this).attr("src"));

// i think this part will append the content in the arrays      
    var list = $('#list');
    var existing_item = $('#list_'+ title);

// removing items with the same titles      
    if (existing_item.length < 1){
    var new_item = $('<li />');
    new_item.attr('id', 'list_'+ title);
    new_item.html('<div>' + title + '</div><img src="' + src + '" />');
    list.append(new_item);
    }
  });
// i think this will set the arrays back to empty
  title_array.length = 0;
  src_array.length = 0;
}

this is just a sample. In actual the image has more tags. i have no clue how to empty out the list when this function is called again. im just learning coding now and i have no idea how to correct this to make it work.

Answer 1

This looks to me like an XY problem.

Judging from your example code above as well as your previous question, I’m guessing what you’re trying to do is update a list of entries based on the attributes of an existing set of elements, but with items with duplicate titles only displayed once.

Assuming I got that right, here’s one way to do it: (demo: http://jsfiddle.net/SxZhG/2/)

var $imgs = $("#imageholder"), $list = $("#list");

function summary_change() {
    // store data in tmp obj with title as key so we can easily ignore dups
    var store = {};  

    $imgs.find("img").each(function() {
        if (store.hasOwnProperty(this.title)) return; // ignore dup title
        store[this.title] = this.getAttribute("src");
    });

    $list.empty();  // empty the list
    for (var title in store) {  // add new list items
        $("<li>")
            .append($("<div>", {"text":title}))
            .append($("<img>", {"src":store[title]}))
            .appendTo($list);
    }
}

Note that if more than one image has the same title, only the src of the first one is used in the summary results. If you wish to use the src of the last item found, simple remove the line if (store.hasOwnProperty(this.title)) return;.