CODEWITHSUNDEEP
javascriptjqueryhtmlcss
kravits88
kravits88

Reputation: 13049

Select elements which don't have parent class

$("#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!

Upvotes: 0

Views: 99

Answers (5)

Chrillewoodz
Chrillewoodz

Reputation: 28338

Try to fetch all except for children of scorer:

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

Upvotes: 1

Mats Kruger
Mats Kruger

Reputation: 115

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

Upvotes: 0

Vineet
Vineet

Reputation: 4645

Try not()

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

FIDDLE

Upvotes: 1

Anoop Joshi P
Anoop Joshi P

Reputation: 25527

You can use filter function for this

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

Fiddle

Upvotes: 2

Akshay
Akshay

Reputation: 14348

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>

Upvotes: 3

Related Questions