Select elements which don't have parent class

Question

 $("#result").html($('[contenteditable]').text()); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="scorer"> <div> <div contenteditable>1</div> <div contenteditable>2</div> </div> </div> <div> <div contenteditable>3</div> <div contenteditable>4</div> </div> <hr /> <div id="result"> result </div> 

How can I select contenteditable elements which do not have a parent up the chain of "scorer" in CSS or jquery.

Result should be 34.

Thanks!

Answer 1

You can use not() function like this .not('.scorer div')

 $("#result").html($('[contenteditable]').not('.scorer div').text()); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="scorer"> <div> <div contenteditable>1</div> <div contenteditable>2</div> </div> </div> <div> <div contenteditable>3</div> <div contenteditable>4</div> </div> <hr /> <div id="result"> result </div> 

Answer 2

You can use filter function for this

var result = $("div[contenteditable]").filter(function () {
    return $(this).closest(".scorer").length == 0
}).text();

Fiddle

Answer 3

Try not()

$("#result").html($('[contenteditable]').parent().not('.scorer div').text());

FIDDLE

Answer 4

尝试获取除得分手的孩子以外的所有人：

$('div[contenteditable]').not('.scorer div');

Answer 5

Just to give you a different approach which is the one i find more easier to read

$('.result').html($('div:not(.scorer) [contenteditable]').text());

jsfiddle