Почему JQuery влияет только на первый элемент div?

Я использую функцию "replace" для удаления всех нечисловых значений в div.

Кажется, что JQuery replace влияет только на первый элемент.

Вот мой JQuery:

$('#comment').each(function() {
    var thz = $(this);
    var repl = thz.html(thz.html().replace(/\D+/g, ''));
});

Код HTML:

<a id="comment1" href="#"> c2fđf011. </a>
<a id="comment1" href="#"> c20ff113. </a>
<a id="comment1" href="#"> c201gf76341. </a>

Результат:

2011 c20ff113. c201gf76341.

В результате я хочу:

2011 20113 20176341

Ответ 1

У вас есть дубликаты идентификаторов, которые являются недопустимыми, а также селектор идентификаторов jQuery (или любой другой идентификатор id, такой как document.getElementById, который используется внутри jQuery, поскольку элемент с идентификаторами индексируется большинством браузеров и должен быть уникальным) вернет только первый, который появляется в DOM. Измените его на класс и посмотрите, как он работает:

$('.comment').each(function() { 
     var thz =  $(this); var repl =
     thz.html(thz.html().replace(/\D+/g, '')); 
});

HTML

<a class="comment1" href="#"> c2fđf011. </a> 
<a class="comment1" href="#">c20ff113. </a> 
<a class="comment1" href="#"> c201gf76341. </a>

Кстати, ваш идентификатор был таким: -

<a id="comment1" href="#"> c2fđf011. </a> 
<a id="comment2" href="#">c20ff113. </a> 
<a id="comment3" href="#"> c201gf76341. </a>

Запуск с помощью селектора атрибутов поможет вам (но медленно замедляйте его, поскольку это селектор атрибутов и теряет преимущество использования идентификаторов).

$('[id^=comment]').each(function() { // While using this better give a container context $('[id^=comment]', 'container').each(function...
    var thz = $(this);
    var repl = thz.html(thz.html().replace(/\D+/g, ''));
});

Демо

Мораль: идентификаторы должны быть уникальными

Ответ 2

Идентификатор на странице HTML должен быть уникальным

Именно по этой причине он нацелен только на первый экземпляр найденного элемента.

Вместо этого замените элементы классом

$('.comment').each(function() {
       // Your code
});

Ответ 3

$('.comment').each(function() { var thz = $(this); var repl = thz.html(thz.html().replace(/\D+/g, '')); });

заменить элемент ur с id comment на класс comment.

Если вы используете идентификатор несколько раз на элементах, селектор будет выбирать только первый элемент с этим идентификатором.

Но когда вы используете класс вместо этого, селектор выберет весь элемент, имеющий этот класс.

Ответ 4

Если вы действительно не хотите изменять html, вы можете использовать селектор по атрибуту. Но, как предложили другие, использование класса вместо id - лучший вариант здесь.

$('div[id="comment"]').each(function(){})