不同的jQuery表结果 [英] Differing jquery table results
本文介绍了不同的jQuery表结果的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
在尝试为此问题我遇到了一个问题.难道每个都不都有相似的输出吗?第一个甚至不输出div
s
While attempting to get the proper jquery for this question I ran into a question. Shouldn't each of these have similar outputs? The first one doesn't even output the class
of the div
s
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>
推荐答案
将div
放入tr
内是无效的html,因此浏览器会为您修复"布局,从而破坏了依赖预期的选择器层次结构.
Putting a div
inside a tr
is invalid html, so the browser "fixes" the layout for you, breaking your selectors that rely on the expected hierarchy.
以下是检查员显示的内容:
Here's what the inspector shows:
<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/
这篇关于不同的jQuery表结果的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文