更改具有指定編號的每個元素的innerHTML

Question

我正在嘗試更改的每個元素的id爲'文件名'的innerHTML值，但只有第一個被更新。

我的問題是，只有第一個元素與id'文件名'被更新。

HTML代碼是作爲液體模板生成的，但我認爲它不會改變任何內容。

下面是HTML：

<ul> 
    {% for product in products %} 
     <li> 
     <p>{{ product.title }}</p> 
     {% for image in product.images %} 
     <img src={{ image.src }} height="200px" /> 
     <p>1) Is your image name descriptive? {{ image.src }}</p> 
     <p>2) Is your alt tag descriptive enough? {{ product.title }}</p> 
     <p>3) Is your image file type JPEG? <div id="filename">{{ image.src }}</div></p> 
     {% endfor %} 
     </li> 
     <hr> 
     {% endfor %} 
    </ul> 

和JavaScript：

<script type="text/javascript"> 
    $("#filename").each(function() { 
    $(this).html("ext!"); 
    }); 
</script> 

Answer 1

ID's need to be unique - 你應該嘗試id="filename"更換所有元素class="filename"代替，然後與.filename更換#filename您的each()功能，因此它類似於以下內容：

$(".filename").each(function() { 
    $(this).html("ext!"); 
});