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コードが実行され、1つの要素が追加されます。

追加要素:

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

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

デモ:フィドル

注: ID はドキュメント内で一意である必要があるため、idchat-textを持つ要素upload-fをすべての会話に追加していますが、これは無効です。

于 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 に答える