javascript - jQuery javascript 检查页面上是否存在某些 html 的方法

Question

在添加更多代码之前，我想确保：

<a href='index.php?option=com_content&view=article&id=36'>Hello</a>

尚未在 id='faqs' 的 div 内的 html 页面上

<div id='faqs'>
<a href='index.php?option=com_content&view=article&id=36'>Hello</a>
</div>

使用 jquery 或 javascript 执行此操作的最佳方法是什么？

谢谢

Answer 1

if (!$('a[href$="view=article&id=36"]', '#faqs').length) {
    //does'nt exist
}

Answer 2

如果目标是在 div 标签中以 a 标签作为子标签结束，就是这样，那么不要费心检查，只需重新添加它，如下所示：

$('#faqs').html('');
$('<a />')
  .attr('href', 'index.php?option=com_content&view=article&id=36')
  .html('hello')
  .appendTo($('#faqs'))​;​

但是，如果您真的需要检查它是否存在，那么您可以执行以下操作：

var exists = $('#faqs a[href="index.php?option=com_content&view=article&id=36"]').length > 0;

更新

在 html 中查找字符串可以按如下方式完成，但这不是推荐的解决方案。您可能会遇到以不同方式编码 html 的不同浏览器等问题（在 chrome 中测试）：

var stringToFind = '<a href="index.php?option=com_content&view=article&id=36">Hello</a>';

// need to replace the & ...
stringToFind = stringToFind.replace(/&/g, '&amp;');

var exists = $('#faqs').html().indexOf(stringToFind) > -1;
if (exists) {
  // do something            
} else {
  // do something else
}

这是一个工作示例-> http://jsfiddle.net/Uzef8/2/

Answer 3

您可以使用 indexOf 进行搜索

var inBlock = $('#faqs').html();
if (inBlock.indexOf("<a href='index.php?option=com_content&view=article&id=36'>Hello</a>") == -1) {
    $('#faqs').append ("<a href='index.php?option=com_content&view=article&id=36'>Hello</a>");
}

Answer 4

最简单的方法是使用 jQuery 选择元素，并检查length结果对象的属性：

var anchor = $('#faqs a[href="index.php?option=com_content&view=article&id=36"]')
if(anchor.length == 0) {
    // element isn't on the page
}