jquery沒有獲取元素的類名

Question

我有下面的代碼，但由於某種原因，jQuery沒有選擇元素類名，我知道如果元素有多個類調用.attr('class')不會返回它們，但.hasClass('class-name')應該能夠識別元素是否具有類名。
我的問題是，jquery返回的類名稱爲undefined（我從行中得到了這個評論。）。 如何才能讓#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') 
}); 

Answer 2

問題是$('#parent> div')返回#parent的子div，所以再次調用children() d oes不返回任何元素。

您可以使用一個簡單的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

書面alread Ÿ在其他的答案，你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>