無法選擇子div jQuery

Question

<div class='class1'> 
    <div class='class2'> 
    <div class='class3'> 
     some text 
    </div> 
    <div class='class4'> 
     some text 
    </div> 
    </div> 
</div> 

我想選擇div.class1而不是div.class4，但這不起作用。

$('.class1').not('.class4') 

Answer 1

我想從div.class1，但沒有選擇所有內容[...] div.class4

您可以使用此屬性選擇：

• div[class]表示具有class屬性的任何div。
• div[class="class4"]表示任何div，其class屬性的值爲class4。
• div[class!="class4"]表示任何div，其具有class屬性，其值爲而非class4。

所以，你的選擇必須是：

div div[class!="class4"] 

即。任何div在另一個div其中的類名不是class4。

工作實施例：

$(document).ready (
 

 
    function() { 
 
     $('div div[class!="class4"]').css('borderWidth','3px'); 
 
    } 
 
);

div { 
 
margin: 12px; 
 
width: 50%; 
 
border: 1px solid rgb(0,0,0); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="class1"> 
 

 
<div class="class2"> 
 
<div class="class3"> 
 
some text 
 
</div> 
 
<div class="class4"> 
 
some text 
 
</div> 
 
</div> 
 

 
</div>

---

爲了完整性起見，這裏是jQuery的對比的JavaScript當量...

的jQuery：

function() { 
     $('div div[class!="class4"]').css('borderWidth','3px'); 
    } 

的Javascript：

var selectedDivs = document.querySelectorAll('div div:not(.class4)'); 

for (var i = 0; i < selectedDivs.length; i++) { 
    selectedDivs[i].style.borderWidth = '3px'; 
} 

Answer 2

的not('.class4')方法將移除具有class4類從集匹配元素的元素。

---

如果您想篩選出.class1不包含.class4然後使用:not()和:has()僞類選擇組合。

$('.class1:not(:has(.class4))').css('color', 'red')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='class1'> 
 
    <div class='class2'> 
 
    <div class='class3'> 
 
     some text 
 
    </div> 
 
    <div class='class4'> 
 
     some text 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class='class1'> 
 
    <div class='class2'> 
 
    <div class='class3'> 
 
     some text 
 
    </div> 
 
    </div> 
 
</div>

---

UPDATE：如果你想獲得該元素的內容不包括.class4然後用克隆方法clone()元素，刪除.class4和獲取內容。

console.log(
 
    $('.class1') 
 
    // clone the element 
 
    .clone() 
 
    // get `.class4` elements 
 
    .find('.class4') 
 
    // remove them 
 
    .remove() 
 
    // back to previous selector 
 
    .end() 
 
    // get html content 
 
    .html() 
 
)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='class1'> 
 
    <div class='class2'> 
 
    <div class='class3'> 
 
     some text 
 
    </div> 
 
    <div class='class4'> 
 
     some text 
 
    </div> 
 
    </div> 
 
</div>