jquery 没有得到 class 元素名称

Question

我有以下代码，但出于某种原因 jQuery 没有选择元素 class 名称，我理解如果元素有多个 class 调用 .attr('class') 不会 return 它们，但 .hasClass('class-name') 应该能够识别元素是否具有 class 名称。
我的问题是 jquery returns class name as undefined（我从评论的行中得到了这个。）。我如何才能使 #parent 中没有 class the-one 的所有其他 div children 具有黄色背景。

$(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 元素中的 none 具有任何子元素。删除它，代码就可以工作了：

$(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')
});

Answer 2

问题是 $('#parent> div') return 是 #parent 的 div children 所以再次调用 children() 不会 return 任何元素。

您可以使用简单的 jQuery 选择器而不是像

这样的循环

$(document).ready(function() {
  $('#parent> div:not(.the-one)').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>

但是你可以只用css，不需要用jQuery

#parent> div:not(.the-one) {
  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 3

为什么不试试更简单的方法呢？:

$("#parent > div").not(".the-one").css("background", "yellow");

More info about jQuery's .not method...

Answer 4

$(document).ready(function() {
   $('#parent > div').each(function(){
   var classtheone = $(this).hasClass('the-one');
   if(!classtheone){
     $(this).css('background-color', '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 5

试试这个

$("#parent div").each(function(){ 
var me=$(this); 
if(me.hasClass("the-one")) { me.css({"background-color" : "yellow"}); } 
})

Answer 6

正如其他答案中所写，您的 children() 调用是问题所在，我建议将以下解决方案与 each() 一起使用，因为它更简单

$(document).ready(function()
{
 $('#parent div').each(function( i ) {
   if ( !$(this).hasClass('the-one')) {
      $(this).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>

jquery 没有得到 class 元素名称

jquery not getting class name of elements

javascript

jquery

jquery-selectors