无法选择子div jQuery

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

我想选择div.class1而不是div.class4，但这不起作用。无法选择子div jQuery

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

来源

2016-12-07 Oloji

的'.class4'格是'.class1'所以无法避免的一个孩子。这听起来像是一个XY问题。你的问题到底是什么？ –

你想要什么样的预期结果？ plz简要地回答你的问题 –

我想从div.class1中选择所有内容，但没有div.class4的内容 – Oloji

我想从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'; 
}

来源

2016-12-07 11:14:07 Rounin

的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>

来源

2016-12-07 10:05:34

无法选择子div jQuery

回答

相关问题