[解決済み] jQueryで特定のidを持つdivが存在するかどうかを確認するにはどうすればよいですか？

質問

を追加する関数があります。 <div> をクリックすると、その要素が表示されます。この関数は、クリックされた要素のテキストを取得し、それを変数 name . その変数が <div> id を追加した。

を確認する必要があります。 <div> id と 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-close の子として append 関数に追加します。 .labels を閉じる方法がありました。 <div> を使用します。をクリックした後 .mini-close からもう一度同じ名前をクリックしようとすると li.friends を見つけると、やはり div id [name] の最初の部分を返します。 if ステートメントを使用します。

どのように解決するのですか？

を使用することができます。 .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');
  }
});