Question

我正在从HTML字符串创建一个JQuery DOM对象。然后我试图删除只获得不是img的对象。

我正在使用非选择器...但是它没有像我期望的那样工作，结果对象只包含img标签，我不知道为什么。

这是一个片段

var HTMLString='<figure class="tmblr-full"><img src="http://placekitten.com/g/200/300"></figure><p>This is NOT the cat we are looking for! </p>';

var jqueryObjectFromHTMLString=$(HTMLString);

var jqueryObjectMinusImages=jqueryObjectFromHTMLString.not('img');

//The following outputs an image tag
console.log(jqueryObjectMinusImages.html());

//The following replaces the body with our jquery object that's not supposed to inclue an image
$('body').replaceWith(jqueryObjectMinusImages);

.block{
  width:200px;
  height:200px;
}

.red{
  background:red;  
}

.blue{
  background:blue;  
}

.green{
  background:green;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block red">

</div>

Answer 1

更简单的方法是删除图像

var HTMLString='<figure class="tmblr-full"><img src="http://placekitten.com/g/200/300"></figure><p>This is NOT the cat we are looking for! </p>';

var $htmlObject=$(HTMLString);

$htmlObject.find('img').remove();

如果您需要保持原始对象不变，您也可以克隆对象

var HTMLString='<figure class="tmblr-full"><img src="http://placekitten.com/g/200/300"></figure><p>This is NOT the cat we are looking for! </p>';

var $htmlObject=$(HTMLString);
var $htmlNoImages = $htmlObject.clone();
$htmlNoImages.find('img').remove();

https://jsfiddle.net/a16rberw/2/

Answer 2

让我们解构您的代码。首先，使用字符串创建jQuery对象。然后，您的jQuery对象包含2个元素，figure和p。

然后使用.not过滤当前元素。它会不过滤子项。所以.not之后的jQuery对象仍然是相同的，因为它不包含任何img。

然后，你在堆栈上做.html。在堆栈上使用此函数作为getter时，它会返回堆栈中第一个元素的 innerHTML 。在您的情况下，它会返回innerHTML figure只包含img。

如果要删除jQuery元素中的img，则应使用.find('img').remove();：

var HTMLString='<figure class="tmblr-full"><img src="http://placekitten.com/g/200/300"></figure><p>This is NOT the cat we are looking for! </p>';

var jqueryObjectFromHTMLString=$(HTMLString);

var jqueryObjectMinusImages=$(HTMLString).clone();
jqueryObjectMinusImages.find('img').remove();

//The following replaces the body with our jquery object that's not supposed to inclue an image
$('body').replaceWith(jqueryObjectMinusImages);

.block{
  width:200px;
  height:200px;
}

.red{
  background:red;  
}

.blue{
  background:blue;  
}

.green{
  background:green;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block red">

</div>

Answer 3

在您提供的JSFiddle中，您可以调用

$('body').replaceWith(jqueryObjectMinusImages);

当我将其更改为：

$(document).replaceWith(jqueryObjectMinusImages);

这对我有用。 JSFiddle

JQuery Not选择器无法按预期工作

3 个答案: