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 divs

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> 

https://jsfiddle.net/bduhtfl6/


Comments

Popular posts from this blog

angular - Is it possible to get native element for formControl? -

unity3d - Rotate an object to face an opposite direction -

javascript - Why jQuery Select box change event is now working? -