Как заменить текст в нескольких divs условно?

78
10

Мне нужно заменить текст многих div, где в соответствии с текстом каждого div поместите текст или другой текст.

Пример: если текст равен 0, замените его "no quota", и если он отличается от 0, поставьте "Yes it has".

Код HTML:

 <div><p id="text">1</p></div>
<div><p id="text">0</p></div>
<div><p id="text">1</p></div>

Код JS:

    $('#text').text(function(){
if($(this).text() == '0')
{
$(this).text('No quota');
}
else
{
$(this).text('"Yes it has');
}
});

Но меняет только первый элемент, а остальные оставляют один и тот же текст. Как я могу изменить текст для каждого элемента? Привет из Чили.

спросил(а) 2016-04-05T03:16:00+03:00 5 лет, 2 месяца назад
1
Решение
89

Идентификатор должен использоваться как уникальный идентификационный номер, поэтому изменяется только первый элемент. Идентификатор изменения для CLASS должен решить проблему.

ответил(а) 2016-04-05T03:19:00+03:00 5 лет, 2 месяца назад
89

у вас есть несколько экземпляров одного и того же идентификатора. каждый идентификатор должен быть уникальным, поэтому его влияние влияет только на первый элемент. Измените идентификатор на класс, и вы сможете изменить каждый p на новый текст. Также заметили опечатку в последнем тексте (исправлено в коде ниже).


 <div><p class="text">1</p></div>
<div><p class="text">0</p></div>
<div><p class="text">1</p></div>

$('.text').each(function(){
if($(this).text() == '0')
{
$(this).text('No quota');
}
else
{
$(this).text('Yes it has');
}
});

ответил(а) 2016-04-05T03:19:00+03:00 5 лет, 2 месяца назад
63

Есть две проблемы.

Во-первых, как отмечали другие, вы должны использовать класс вместо ID, если хотите сопоставить несколько элементов.

Во-вторых, когда вы передаете аргумент функции в .text(), он получает старый текст в качестве аргумента и должен возвращать новый текст, а не вызывать его .html(). Так должно быть:

$('.text').text(function(i, oldtext) {
return oldtext == '0' ? 'No quota' : 'Yes it has';
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><p class="text">1</p></div>
<div><p class="text">0</p></div>
<div><p class="text">1</p></div>

ответил(а) 2016-04-05T03:46:00+03:00 5 лет, 2 месяца назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема