javascript - If element has class and another element is empty change class on another element -

i have html structure, snippet there lots more in same structure.

<button id="showempty">press</button> <div class="children">     <div class="package">         <span class="name"></span>         <span class="value"></span>     </div>      <div class="package array">         <span class="name"></span>         <span class="value"></span>     </div>      <div class="package">         <span class="name"></span>         <span class="value"></span>     </div>      <div class="package array">         <div class="children">             <div class="package array">                 <span class="name"></span>                 <span class="value"></span>             </div>              <div class="package">                 <span class="name"></span>                 <span class="value"></span>             </div>              <div class="package array">                 <div class="children">                     <div class="package array">                         <span class="name"></span>                         <span class="value"></span>                     </div>                      <div class="package array">                         <span class="name"></span>                         <span class="value"></span>                     </div>                      <div class="package">                         <span class="name"></span>                         <span class="value"></span>                     </div>                 </div>             </div>         </div>     </div> </div> 

i want find of div elements class 'array' , span elements class 'value' within div dont have content.

those apply want change class of span element within div class 'name' 'empty'.

i have code far, i'm not sure go next.

(function(){     $('#showempty').click(function() {         if ($('div.package').each().hasclass('array') && $('span.value').each().text().trim().length()) {             $('span.value').removeclass('name').addclass('empty');         else alert('no arrays found');         }     }); }); 

edit: need array div's don't have children div's

one easy way is(assuming empty span <span></span>, ie there no blank content in it)

jquery(function ($) {     $('#showempty').click(function () {                 $('div.package.array').has('span.value:empty').find('span.name').removeclass('name').addclass('empty');     }); }); 

here finds div classes package , array has empty span class value, find span class name in div , remove , add class

---

if span.value can have blank values can use filter

jquery(function ($) {     $('#showempty').click(function () {         $('div.package.array').filter(function () {             return $('span.value', this).text().trim().length() > 0;         }).find('span.name').removeclass('name').addclass('empty');     }); });