Измените innerHTML элемента EVERY с указанным id

Question

Я пытаюсь изменить значение innerHTML каждый элемент с идентификатором 'filename', но обновляется только первый.

Моя проблема в том, что обновляется только первый элемент с идентификатором 'filename'.

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!"); 
});