☰

jQuery で特定の ID を持つ div が存在するかどうかを確認するにはどうすればよいでしょうか? 質問する

tag-icon • tag-icon javascript jquery
jQuery で特定の ID を持つ div が存在するかどうかを確認するにはどうすればよいでしょうか? 質問する

クリック時に要素にを追加する関数があります<div>。この関数はクリックされた要素のテキストを取得し、それを という変数に割り当てますname。この変数は<div> id追加された要素の として使用されます。

<div> id要素を追加する前に、 with がすでに存在するかどうかを確認する必要がありますnameが、これを確認する方法がわかりません。

これが私のコードです:

$("li.friend").live('click', function() {
  name = $(this).text();

  // if-statement checking for existence of <div> should go here
  // If <div> does not exist, then append element
    $("div#chatbar").append("<div class='labels'><div id='" + name + "' style='display:none;'></div>" + name + "</div>");

  // Else
    alert('this record already exists');
});

これはかなり簡単なように思えますが、「クラス名の検索中に予期しないファイルの終わりが検出されました」というエラーが表示されます。これが何を意味するのか全くわかりません。

if (document.getElementById(name)) {
  $("div#" + name).css({bottom: '30px'});
} else {
  $("div#page-content div#chatbar").append("<div class='labels'>" + name + "</div><div id='" + name + "'></div>");
}

さらに、この要素を閉じるとdiv id [name]ドキュメントから削除されるようにしたいのですが、.remove()そうはなりません。

そのためのコードは次のとおりです。

$(".mini-close").live('click', function(){
  $(this).parent().remove();
});

私は.mini-closeappend 関数を の子として追加したので、必要に応じて.labels追加を閉じる方法がありました。 をクリックしてから同じ名前をもう一度クリックしようとすると、がまだ検出され、ステートメントの最初の部分が返されます。<div>.mini-closeli.friendsdiv id [name]if

ベストアンサー1

使用できます.length次のように、セレクターの後に次のコードを追加して、一致する要素があるかどうかを確認します。

if($("#" + name).length == 0) {
  //it doesn't exist
}

完全版:

$("li.friend").live('click', function(){
  name = $(this).text();
  if($("#" + name).length == 0) {
    $("div#chatbar").append("<div class='labels'><div id='" + name + "' style='display:none;'></div>" + name + "</div>");
  } else {
    alert('this record already exists');
  }
});

または、この部分の非 jQuery バージョン (ID であるため) は次のとおりです。

$("li.friend").live('click', function(){
  name = $(this).text();
  if(document.getElementById(name) == null) {
    $("div#chatbar").append("<div class='labels'><div id='" + name + "' style='display:none;'></div>" + name + "</div>");
  } else {
    alert('this record already exists');
  }
});

おすすめ記事