如何使用jQuery检查存在值属性

Question

我想检查属性html标记的值，如果该元素不存在与属性的值附加在我的HTML中的某些元素。

，比如我有很多李标签是这样的：

<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> 

我要当点击任何丽运行此jQuery代码并添加一个元素：

追加要素：

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代码：

$(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); 
    } 

}); 

所以我想先检查是否存在我要追加它。如果这个元素不存在，那么追加这个，否则不要追加这个。

非常感谢很多家伙。

Answer 1

一种解决方案是检查与converssationID元素是否存在

$(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); 
    } 
}); 

演示：Fiddle

注：要附加id为chat-text和upload-f元素，每次谈话这是自ID无效的应在文档中是唯一的

Answer 2

当您使用jQuery抓取某些东西时，它会返回结果数组。如果它找不到任何东西，它不会抛出错误，它只会给你一个空数组。

所以，如果jQuery对象的长度（这是一个数组）是zero则没有匹配的元素，以在此页中，此时发现：

$(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 3

为了检查元件的存在与否你可以使用.length。

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

所以代码如下所示。

if(conversationID.length) 

为不存在

if(conversationID.length == 0) 

您还可以使用.size()，但其弃用。

Answer 4

试试这个：

$(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

您可以使用下面的Jquery给出..

$('#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); 
    } 

    }); 

jQuery中.length工作check if exist or not. If not exist then it will return 0 value else more then 0

请看给出网址...

http://jsfiddle.net/6G633/