JQuery показать/скрыть все дети данного элемента

Question

В этом HTML:

$('#endre_dinmeny').click(function() { 
 
     $('.form-validate').children('.label-visible').hide(); 
 
     $('.form-validate').children('.edit-visible').show(); 
 
    });

<span id="endre_dinmeny" class="col-md-6 bestill-edit2">Endre</span> 
 
<div class="form-validate"> 
 
    <div class="row"> 
 
    <label class="col-md-4"> 
 
     Leveringsfrekvens 
 
    </label> 
 
    <div class="label-visible"> 
 
     view 
 
    </div> 
 
    <div class="edit-visible"> 
 
     edit 
 
    </div> 
 
    </div> 
 
</div> 
 

 

 

Что я делаю так неправильно, что она не делает ничего absolutetly? Я был до почти 48h straigh поэтому, пожалуйста, быть нежным, если вы заметили ошибку нуб, но я устал стучать головой с этим ..

С наилучшими пожеланиями,

Answer 1

Использование find()

$('.form-validate').find('.label-visible').hide(); 
$('.form-validate').find('.edit-visible').show(); 

find('.label-visible') не будет работать, потому что .label-visible не является прямым ребенком.

children() будет искать только прямой потомки. Найти будет искать прямые и вложенные потомки.

Наконец, если у вас есть несколько .form-validate элементов, вы должны сузить контекст с помощью $(this)

$(this).find('.form-validate .label-visible').hide(); 
$(this).find('.form-validate .edit-visible').show(); 

Answer 2

Для переключения детей данного элемента, вы должны использовать find. Но самое главное, что вы должны использовать его с текущим элементом, $(this)

$('#endre_dinmeny').click(function() { 
    $(this).find('.form-validate .label-visible').hide(); 
    $(this).find('.form-validate .edit-visible').show(); 
    });