4

我想检查属性 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);
    }

});

所以我想先检查是否存在我想附加它。如果此元素不存在，则附加此否则不要附加此。

非常感谢你们。

4

5 回答 5

2

一种解决方案是检查是否存在具有 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);
    }
});

演示：小提琴

chat-text注意：您将带有 id的元素附加upload-f到每个无效的对话中，因为 ID 在文档中应该是唯一的

于 2013-08-19T05:15:16.700 回答
2

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

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

所以代码如下所示。

if(conversationID.length)

因为不存在

if(conversationID.length == 0)

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

于 2013-08-19T05:15:49.547 回答
1

当您使用 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);
    }

});
于 2013-08-19T05:15:21.193 回答
1

尝试这个：

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

});
于 2013-08-19T05:19:30.410 回答
1

您可以使用下面给出的 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/

于 2013-08-19T05:52:12.240 回答