javascript - Differing jquery table results -
while attempting proper jquery this question ran question. shouldn't each of these have similar outputs? first 1 doesn't output class
of 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 1 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>
putting div
inside tr
invalid html, browser "fixes" layout you, breaking selectors rely on expected hierarchy.
here's 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>
Comments
Post a Comment