不同的jQuery表结果

Question

虽然试图获得适当的jQuery为this question我遇到了一个问题。不应该每个都有类似的结果吗？第一个甚至没有输出div小号

var list = document.querySelectorAll('[aria-label="Help"]'); 
 
console.log('&&&&&&&&&&&&&&'); 
 
$('[aria-label="Help"] tr div').each(function() { 
 
    console.log($(this).attr('class')); 
 
    console.log($(this).text()); 
 
}); 
 
console.log('&&THIS ONE WORKS&&&'); 
 
$('.text:not(:contains(X-Men 2),:contains(X-Men 3))').each(function() { 
 
    console.log($(this).text()); 
 
}); 
 
console.log('&&&&&&&&&&&&&&'); 
 
$('[aria-label="Help"] .text:not(:contains(X-Men 2),:contains(X-Men 3))').each(function() { 
 
    console.log($(this).text()); 
 
}); 
 
console.log('&&&&&&&&&&&&&&'); 
 
$('.text:not(:contains(X-Men 2),:contains(X-Men 3))',$(list)).each(function() { 
 
    console.log($(this).text()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id=5 aria-label="Help"> 
 
    <thead></thead> 
 
    <tbody> 
 
    <tr> 
 
     <div class='abc'> 
 
     <label><a><span class='text'>Game of thrones</span></a></label> 
 
     </div> 
 
    </tr> 
 
    <tr> 
 
     <div class='abc'> 
 
     <label><a><span class='text'>Harry Potter</span></a></label> 
 
     </div> 
 
    </tr> 
 
    <tr> 
 
     <div class='abc'> 
 
     <label><a><span class='text'>X-Men</span></a></label> 
 
     </div> 
 
    </tr> 
 
    <tr> 
 
     <div class='abc'> 
 
     <label><a><span class='text'>X-Men 2</span></a></label> 
 
     </div> 
 
    </tr> 
 
    <tr> 
 
     <div class='abc'> 
 
     <label><a><span class='text'>X-Men 3</span></a></label> 
 
     </div> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 1

把一个div一个tr里面是无效的HTML，所以浏览器的“修复”的布局为你的class，破坏了你依赖预期层次结构的选择器。

下面介绍一下检查显示：

<div class="abc"> 
    <label><a><span class="text">Game of thrones</span></a></label> 
</div> 
<div class="abc"> 
    <label><a><span class="text">Harry Potter</span></a></label> 
</div> 
<div class="abc"> 
    <label><a><span class="text">X-Men</span></a></label> 
</div> 
<div class="abc"> 
    <label><a><span class="text">X-Men 2</span></a></label> 
</div> 
<div class="abc"> 
    <label><a><span class="text">X-Men 3</span></a></label> 
</div> 
<table id="5" aria-label="Help"> 
    <thead></thead> 
    <tbody> 
    <tr> 

    </tr> 
    <tr> 

    </tr> 
    <tr> 

    </tr> 
    <tr> 

    </tr> 
    <tr> 

    </tr> 
    </tbody> 
</table> 

https://jsfiddle.net/bduhtfL6/