как скрыть элемент в классе, если следующий элемент пуст

Question

У меня есть HTML следующим образом и вы хотите скрыть элемент с классом roles, если следующие div пуст.

<b class="roles">heading 1</b> 
<div>...</div> 

<b class="roles">heading 2</b> 
<div></div> 

В этом случае первый заголовок должен отображаться, хотя второй будет скрыт. JQuery Я попытался это следующим образом:

$(document).ready(function(){ 
    $('.roles').next().is(':empty').addClass('hidden'); 
}); 

Вот мой CSS относительно hidden класса:

.hidden { 
    display: none; 
} 

Спасибо за вашу помощь!

Answer 1

Вам нужно зациклиться на всех элементах .roles, чтобы проверить, имеет ли этот отдельный экземпляр пустой текст. Попробуйте это:

$('.roles').each(function() { 
 
    if ($(this).next('div').is(':empty')) 
 
    $(this).addClass('hidden'); 
 
});

.hidden { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<b class="roles">heading 1</b> 
 
<div>Not empty</div> 
 
<b class="roles">heading 2</b> 
 
<div></div>

Answer 2

для множественных .roles вы, чтобы перебрать каждого из элементов и проверять состояние каждого элемента.

$('.roles').each(function() { 
    if ($(this).next().is(':empty')) { 
     $(this).addClass('hidden'); 
    } 
}); 

Answer 3

Вы можете использовать противоположную логику:

$(document).ready(function() { 
    $('div:empty').prev('.roles').addClass('hidden'); 
}); 

Или используя следующий селектор:

$(document).ready(function() { 
    $('.roles + div:empty').prev().addClass('hidden'); 
});