jquery filter（）在我的代码中返回函数混淆

Question

我希望包含img和video标记的包裹将被排除在应用红色背景之外。我使用has（）但它似乎不起作用。

＆＃13;

＆＃13;

$('document').ready(function(){

    
    var plainText = $('.wrap').not(':has(img, video)');

  $('.wrap').filter(function( index ) {
    return $(this).not(':has(img, video)');
  }).css( "background-color", "red" );
    
});

＆＃13;

.wrap{
    border: 1px solid;
    display: block;
    margin: 10px 0 10px 0;
}

＆＃13;

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


<div class="wrap">
    <div class="content">
        <img>
            
        </img>
    </div>
</div>

<div class="wrap">
    <div class="content">
        <video></video>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

过滤器不是必需的，只需在匹配的包装元素上调用.not()即可。 .not()过滤一组匹配的元素，它不返回布尔值。通过调用.not()上的$(this)，您仍然会返回一个jQuery对象，该对象的结果为true。

$('document').ready(function(){

  $('.wrap').not(':has(img, video)').css( "background-color", "red" );
    
});

.wrap{
    border: 1px solid;
    display: block;
    margin: 10px 0 10px 0;
}

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


<div class="wrap">
    <div class="content">
        <img>
            
        </img>
    </div>
</div>

<div class="wrap">
    <div class="content">
        <video></video>
    </div>
</div>

Answer 2

.not()将返回一个jQuery对象，它始终是真实的。

.filter（）方法必须根据是否选择当前元素返回true/false，因为not返回一个jQuery对象，它将被视为truthy所以所有元素都是传递给.filter()将被选中。相反，您可以使用.is()来返回布尔值。

注意：不知道你没有使用plainText

的原因

＆＃13;

＆＃13;

$('document').ready(function() {


  var plainText = $('.wrap').not(':has(img, video)');
  plainText.css('border', '1px solid blue')

  $('.wrap').filter(function(index) {
    return !$(this).is(':has(img, video)');
  }).css("background-color", "red");

});

＆＃13;

.wrap {
  border: 1px solid;
  display: block;
  margin: 10px 0 10px 0;
}

＆＃13;

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


<div class="wrap">
  <div class="content">
    <img />
  </div>
</div>

<div class="wrap">
  <div class="content">
    <video></video>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

在jquery中使用is()它会返回true或false，如果你使用not它总是返回object而不是布尔值

 $('.wrap').filter(function (index) {
     return !$(this).is(':has(img,video)');
 }).css("background-color", "red");

DEMO

Answer 4

$('.wrap').filter(function( index ) {
   return $(this).not(':has(img,video)').length;
}).css( "background-color", "red" );