проверить, имеет ли список элемент с тем же идентификатором

Question

У меня есть следующий код html.

<div class="list"> 
    <p id="item1">Item 1</p> 
    <p id="item2">Item 2</p> 
    <p id="item3">Item 3</p> 
    <p id="item4">Item 4</p> 
</div> 

<input name="item1" type="checkbox"/> 
<input name="item6" type="checkbox"/> 
<input name="item5" type="checkbox"/> 

И когда я нажимаю на флажок я хочу, чтобы добавить новый тег <p> к <div> с id как вход-х name.

$('input').click(function(){ 
    $('.list').append('<p id="' + $(this).attr("name") + '"</p>'); 
}); 

Но предметы с одинаковым идентификатором не должны повторяться! Как я могу это проверить? Я думаю, мне нужно Переберите мой список <p> что-то вроде этого

$('.list p').each(function(){ 
    if (..element with same id exists..) { 
     ....  
    } else { 
     ('.list').append('<p id="' + $(this).attr("id") + '"</p>');  
    } 
}); 

Answer 1

Вы можете использовать длину абзаца элементов в .list и и в переменной ид, в конце концов, чтобы сделать их уникальными:

$('input').click(function(){ 
    if($(this).is(':checked')){// on checked true 
    var p_length=$('.list p').length; //find length of p elements 
    if(p_length==0) 
    $('.list').append('<p id="' + $(this).attr("id") + '"</p>');  
    else 
    $('.list').append('<p id="' + $(this).attr("name")+"_"+p_length + '"</p>'); 
} 
}); 

Answer 2

Вы можете проверить длину пропеллер выбранных объектов, выбрав его по ID:

$("#YourId").length >0 //this means id already exist. 

здесь являются реф ссылки:

http://learn.jquery.com/using-jquery-core/faq/how-do-i-test-whether-an-element-‌​exists/

jquery how to find if div with specific id exists

Answer 3

Попробуйте $(element).has('#id');

if($('.list').has('#foo')) 
{ 
    //dont append 
} 
else 
{ 
//append 
} 

Answer 4

Попробуйте это:

$('input').on('click', function(){ 
    inputId = $(this).attr('name'); 
    console.log($('.list').find('#' + inputId)); 
    if($('.list').find('#' + inputId).length === 0) 
    { 
     $('.list').append('<p id="' + inputId + '"></p>'); 
    } 
}); 

DEMO