检查 div 是否已包含特定项目答案

【问题标题】：Check if div already contains a specific item检查 div 是否已包含特定项目
【发布时间】：2014-05-22 17:59:06
【问题描述】：

我正在构建一个有角度的应用程序，其中一个按钮应该在 div 中附加一个块引用，但只有当块引用不在 HTML 中时才应该这样做。

因此，我正在考虑使用以下代码在 html 中查找字符串 <blockquote id='myBlockquote'>，但它不起作用：

if ((myHTML.indexOf('<blockquote id="myBlockquote">') = -1)) {
  myHTML.append('some HTML');
}

我做错了什么？

干杯

【问题讨论】：

我宁愿过度考虑您的解决方案，也许将 id 保存在范围内的数组中，然后查看您是否已经拥有 id 或类似的东西，这比为某些 id 或元素解析 dom 性能要好得多

标签： javascript jquery html css angularjs

【解决方案1】：

如果您想要的元素存在或不存在，请尝试检查长度，然后使用 .length 然后追加

if(myHTML.find('#myBlockquote').length > 0) {
  myHTML.append('some HTML');
}

【讨论】：

我收到一条错误消息，说我的 html 没有方法。find 我使用 typeof 来检查我的 html 的类型，它是一个字符串
我认为您正在使用字符串查找！但我建议您使用对象而不是字符串！

【解决方案2】：

我建议不要从控制器操作 DOM。这是视图的责任。

你应该有一个包含块引用的数组，例如：

$scope.blockquotes = [{id: 1, text: "This is a blockquote"}, {id: 2, text: "This is a blockquote"}, {id: 3, text: "This is a blockquote"}];

还有一个在点击时执行的函数，用于检查当前用户或其他人是否已经添加了块引用。

$scope.addBlockquote = function(userId) {
  var found = false;
  for(var i = 0; i < $scope.blockquotes.length; i++) {
   if ($scope.blockquotes[i].id == userId) {
    found = true;
    break;
   }
  }
}

您的视图或简单的 html 模板将遍历 blockquotes 数组并像这样输出它们：

<blockquote ng-repeat="quote in blockquotes">{{quote.text}}</blockquote>

【讨论】：

【解决方案3】：

我相信 myHTML 是字符串而不是 DOM 对象。您可以将字符串转换为 html，然后在其中找到元素的存在：

var elements = $(myHTML);
if(!$('#myBlockquote', elements).length){
   //element does not exists.
}

【讨论】：