. Каждый список в div

Question

Я создаю музыкальный сайт. У меня есть раздел, в котором вы нажимаете имя исполнителя, и я использую jquery для отправки идентификатора исполнителя в БД и извлечения всех песен под его именем, а затем перечисляю их в разделе на странице. как ссылки.

Моя проблема в том, что всякий раз, когда я использую .text или .val для изменения названий песен в div, если у него есть 2 песни, он показывает только название первой песни.

Однако, если я использую .append, когда я нажимаю 1 имя исполнителя, он отлично перетягивает всю его песню, но если я нажимаю имя другого исполнителя на той же странице, он добавляет его песни ниже тех, что были у предыдущего исполнителя.

Только список 1 песня, даже если есть 2;

$.each(data.resultData, function(key, value) {
    $('value.SongTitles').text(value.artistName +':' + songTitle).fadeIn(); 
});

Список всех песен в порядке, но не удаляет предыдущие песни исполнителя после нажатия нового имени исполнителя;

$.each(data.resultData, function(key, value) { 
    $('value.SongTitles').append(value.artistName +':' + songTitle).fadeIn(); 
});

Answer 1

Очистить содержимое каждый раз перед заполнением.

$('value.SongTitles').text('');
$.each(data.resultData, function(key, value) { 
    $('value.SongTitles').append(value.artistName +':' + songTitle).fadeIn(); 
});

Answer 2

Вы можете либо очистить перед циклом $ .each, например:

$('value.SongTitles').html('');

$.each(data.resultData, function(key, value) { 
    $('value.SongTitles').append(value.artistName +':' + songTitle).fadeIn(); 
});

Или вы можете проверить ключ следующим образом:

$.each(data.resultData, function(key, value) { 
        if(key == 0){
           $('value.SongTitles').html('');
        }
        $('value.SongTitles').append(value.artistName +':' + songTitle).fadeIn(); 
});

Обратите внимание, я предпочитаюиспользуйте .html () по причинам, перечисленным здесь: В чем разница между jQuery: text () и html ()?

Answer 3

Если вы используете .append (), как следует из названия, он добавит его в конце.Попробуйте .html (), он очистит весь предыдущий контент.

$('value.SongTitles').html(value.artistName +':' + songTitle).fadeIn(); 

Answer 4

Итак, первая опция перезаписывает содержимое 'value.SongTitles' на каждой итерации, поэтому появляется только одна песня.Сначала вы можете использовать второй вариант очистки 'value.SongTitles', например:

$('value.SongTitles').text("");
$.each(data.resultData, function(key, value) { 
    $('value.SongTitles').append(value.artistName +':' + songTitle).fadeIn(); 
});