javascript - Select a div if it contains all specified elements -

i'm attempting select .item div contains both tagone , tagtwo span elements.

my div structure follows:

<div id="items">      <div id="block1" class="item">         <span class="tagone tag">one</span>         <span class="tagtwo tag">two</span>     </div>      <div id="block2" class="item">         <span class="tagone tag">java</span>     </div>  </div> 

using following jquery i'm able locate tags (with parent div's) separately.

var blocks =  $('#items .item');  blocks.filter('.item').find('[class*="tagone"]').parent(); blocks.filter('.item').find('[class*="tagtwo"]').parent(); 

however, once try combine them narrow down 1 div contains them both, no results , can't seem work out why!

blocks.filter('.item').find('[class*="tagone"][class*="tagtwo"]'); 

my understanding comma syntax create or expression, , without creates , expression. i'm after , expression want return div contains criteria, or nothing @ all.

---

note: i'm doing way because i'm creating toggle-filter based on tags, , criteria (i.e. tagone, tagtwo) concatenation of tags selected user (not shown) preferable try in 1 operation.

---

edit: moved duplicate id's class names instead make valid , tweaked javascript code accordingly.

first of all, id should unique. now, markup contains 2 elements id tagone invalid markup.

you can use class instead of id.

1. select of element two(.tagone or .tagtwo in case)
2. use siblings() select sibling element having other class
3. use closest() select closest ancestor matching selector.

the step #1, #2 , #3 above select .item elements having both .tagone , .tagtwo descendent.

code:

$('.tagone') // select 1 of element   .siblings('.tagtwo') // second element if sibling   .closest('.item') // closest ancestor 

$('.tagone') // select 1 of element    .siblings('.tagtwo') // second element if sibling    .closest('.item') // closest ancestor    .addclass('selected'); // demo purpose

.item {    color: red;  }  div.selected {    color: green;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div id="items">      <div id="block1" class="item">      <span class="tagone tag">one</span>      <span class="tagtwo tag">two</span>    </div>      <div id="block2" class="item">      <span class="tagone tag">java</span>    </div>      <div id="block3" class="item">      <span class="tagtwo tag">i love javascript</span>    </div>    </div>

---

you can use filter follow.

1. iterate on .item elements using filter()
2. use context selector check if current .item has descendent .tagone , .tagtwo.
3. use length property on jquery object number of elements selected selector.

code:

$('.item').filter(function() {   return $('.tagone', this).length && $('.tagtwo', this).length; }) 

// fiddle: https://jsfiddle.net/tusharj/8tuu1wxs/1/    // iterate on elements having item class  $('.item').filter(function() {    return $('.tagone', this).length && $('.tagtwo', this).length;  }).addclass('selected');

.item {    color: red;  }  .selected {    color: green;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div id="items">      <div id="block1" class="item">      <span class="tagone tag">one</span>      <span class="tagtwo tag">two</span>    </div>      <div id="block2" class="item">      <span class="tagone tag">java</span>    </div>      <div id="block3" class="item">      <span class="tagtwo tag">i love javascript</span>    </div>    </div>

---

if sequence/order of elements fixed, css general sibling selector ~ or adjacent sibling selector + can used.

$('.tag1 ~ .tag2').closest('.item') 

or

$('.tag1 + .tag2').closest('.item') 

// fiddle: https://jsfiddle.net/tusharj/amdolfou/1/    $('.tag1 ~ .tag2') // + can used instead of ~    .closest('.item') // closest ancestor    .css('color', 'blue'); // demo purpose

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div id="items">      <div id="block1" class="item">      <span class="tag1 tag">one</span>      <span class="tag2 tag">two</span>    </div>      <div id="block2" class="item">      <span class="tag1 tag">java</span>    </div>    </div>