How to check existing value attribute using jQuery

Question

I want to check the attribute value of an html tag and if this element does not exist with the attribute value, add a specific element to my html.

for example, I have many tags like this:

<ul id="friend-list"> <li id="1"></li> <li id="2"></li> <li id="3"></li> <li id="4"></li> <li id="5"></li> <li id="6"></li> </ul> 

I want when clicking on whether to run this jQuery code and add one element:

add item:

 var conversation ='<div class="conversation stream" id='+ conversationID +'><div class="timeline"><ul class="all-msg"><li class="me typing"><div id="chat-text" contenteditable="true"></div><div id="upload-f"></div><div id="upload-p"></div><div id="chat-arrow"></div></li></ul></div></div>'; $('body').append(conversation); 

JQuery Code:

 $(document).on('click','#friend-list li',function(){ var getID = $(this).attr('id'); var conversationID = 'Conver-' + getID; console.log(conversationID); if(/* don't exist element with attribute and value*/){ // append that element var conversation ='<div class="conversation stream" id='+ conversationID +'><div class="timeline"><ul class="all-msg"><li class="me typing"><div id="chat-text" contenteditable="true"></div><div id="upload-f"></div><div id="upload-p"></div><div id="chat-arrow"></div></li></ul></div></div>'; $('body').append(conversation); } }); 

so I want to check first that I want to add it. if this item does not exist, add it otherwise, do not add it.

Thanks a lot to the guys.

Answer 1

One solution is to check if an element with a converssation identifier exists

 $(document).on('click','#friend-list li',function(){ var getID = $(this).attr('id'); var conversationID = 'Conver-' + getID; console.log(conversationID); if(!$('#' + conversationID).length) { var conversation ='<div class="conversation stream" id='+ conversationID +'><div class="timeline"><ul class="all-msg"><li class="me typing"><div id="chat-text" contenteditable="true"></div><div id="upload-f"></div><div id="upload-p"></div><div id="chat-arrow"></div></li></ul></div></div>'; $('body').append(conversation); } }); 

Demo: Fiddle

Note. You add elements with chat-text and upload-f identifiers to every conversation that is invalid because the identifier must be unique in the document

Answer 2

To check whether an element exists or not, you can use .length .

 .length will return number of elements in the jQuery object. 

So, the code will look below.

 if(conversationID.length) 

for does not exist

 if(conversationID.length == 0) 

You can also use .size() , but its deprecated.

Answer 3

When you use jQuery to capture something, it returns an array of results. If he cannot find anything, he will not throw an error, he will simply return you an empty array.

So, if the length of the jQuery object (which is an array) is zero , then on this page there are no corresponding elements on this page:

  $(document).on('click','#friend-list li',function(){ var getID = $(this).attr('id'); var conversationID = 'Conver-' + getID; console.log(conversationID); if($('#' + conversationID ).length > 0){ // append that element var conversation ='<div class="conversation stream" id='+ conversationID +'><div class="timeline"><ul class="all-msg"><li class="me typing"><div id="chat-text" contenteditable="true"></div><div id="upload-f"></div><div id="upload-p"></div><div id="chat-arrow"></div></li></ul></div></div>'; $('body').append(conversation); } }); 

Answer 4

Try the following:

 $(document).on('click','#friend-list li',function(){ var getID = $(this).attr('id'); var conversationID = 'Conver-' + getID; console.log(conversationID); if($('#' + conversationID ) == false){ // append that element var conversation ='<div class="conversation stream" id='+ conversationID +'><div class="timeline"><ul class="all-msg"><li class="me typing"><div id="chat-text" contenteditable="true"></div><div id="upload-f"></div><div id="upload-p"></div><div id="chat-arrow"></div></li></ul></div></div>'; $('body').append(conversation); } }); 

Answer 5

You can use jQuery below.

 $('#friend-list li').on('click',function(){ var getID = $(this).attr('id'); var conversationID = 'Conver-' + getID; console.log(conversationID); if($('#'+conversationID).length == 0){ // append that element var conversation ='<div class="conversation stream" id='+ conversationID +'><div class="timeline"><ul class="all-msg"><li class="me typing"><div id="chat-text" contenteditable="true"></div><div id="upload-f"></div><div id="upload-p"></div><div id="chat-arrow"></div></li></ul></div></div>'; $('body').append(conversation); } }); 

In jQuery .length work for check if exist or not. If not exist then it will return 0 value else more then 0 check if exist or not. If not exist then it will return 0 value else more then 0

Please study this url ...

http://jsfiddle.net/6G633/