Question

您好我想从图像集的标题和src创建一个数组。然后将其附加到列表中，然后清除数组（集合中的图像更改），然后清除数组和列表。当图像在集合中发生变化时，一遍又一遍地重复它。

这是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>

这是代码：

  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;
}

这只是一个样本。实际上，图像有更多标签。我不知道如何再次调用此函数时清空列表。我现在只是学习编码，我不知道如何纠正它以使其工作。

Answer 1

我认为这就像XY problem。

根据您上面的示例代码以及previous question判断，我猜测您要尝试做的是根据现有属性更新条目列表元素集，但具有重复标题的项目仅显示一次。

假设我做对了，这是一种方法:(演示：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);
    }
}

请注意，如果多个图片具有相同的标题，则在摘要结果中仅使用第一个图像的src。如果您希望使用找到的最后一项的src，只需删除第if (store.hasOwnProperty(this.title)) return;行。

如何从数组中追加内容然后在jQuery中清除它

1 个答案: