Question

我想检查属性html标签的值，如果该元素不存在，则属性值会在我的html中附加某个元素。

例如我有很多像这样的li标签：

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

我想点击任何li运行这个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

如果检查元素是否存在，您可以使用.length。

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

所以代码如下所示。

if(conversationID.length)

for not exists

if(conversationID.length == 0)

您也可以使用.size()，但已弃用。

Answer 3

当你使用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 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/

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

5 个答案: