javascript - jquery 无法获取元素的类名

Question

我有以下代码，但由于某种原因 jQuery 没有选择元素类名称，我知道如果元素有多个类，则调用 .attr('class') 将不会返回它们，但 .hasClass('class-name') 应该能够识别元素是否具有类名。
我的问题是 jquery 返回类名未定义(我从注释行中得到了这个。)。 如何使 #parent 的所有其他 div 子级(没有类 the-one)具有黄色背景。

$(document).ready(function()
{
  var j = $('#parent> div').size();
  for(var i =0;i<j;i++)
    {
      //alert($('#parent> div').children().eq(i).attr('class')); 
      if(!$('#parent> div').children().eq(i).hasClass('the-one'))
        {
          $('#parent> div').children().eq(i).css('background','yellow')
        }
    }
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id = "parent">
  <div class = "one the-one">one</div>
  <div class = "two">two</div>
  <div class = "three">Three</div>
  <div class = "four">Four</div>
</div>

Answer 1

children() 调用是多余的，因为所有 div 元素都没有任何子元素。删除它，代码就可以工作了:

$(document).ready(function() {
  var j = $('#parent> div').size();
  for (var i = 0; i < j; i++) {
    //alert($('#parent> div').eq(i).attr('class')); 
    if (!$('#parent> div').eq(i).hasClass('the-one')) {
      $('#parent> div').eq(i).css('background', 'yellow')
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="parent">
  <div class="one the-one">one</div>
  <div class="two">two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
</div>

另请注意，您可以使用 each() 和 this 关键字来整理 JS 中的逻辑，以引用循环中的元素:

$('#parent > div').each(function() {
    if ($(this).hasClass('the-one'))
        $(this).css('background', 'yellow')
});