Отфильтруйте весь div на основе внутренних элементов

Question

Мне будет очень сложно поставить все здесь короче. Предположим, что все классы уже созданы в css.

У меня есть несколько дивы одного и того же класса, как это: -

<div id="s1" class="perschoolcontainer"> 
 
\t <a href="abc.jpg" > 
 
\t \t <img id="dp1" class="dp" src="abc.jpg"> 
 
\t </a> 
 
\t <p>Cricket</p> 
 
</div> 
 
<div id="s2" class="perschoolcontainer"> 
 
\t <a href="def.jpg" > 
 
\t \t <img id="dp2" class="dp" src="def.jpg"> 
 
\t </a> 
 
\t <p>Tennis</p> 
 
</div> 
 
<div id="s3" class="perschoolcontainer"> 
 
\t <a href="ghi.jpg" > 
 
\t \t <img id="dp3" class="dp" src="ghi.jpg"> 
 
\t </a> 
 
\t <p>Tennis</p> 
 
</div>

они являются дети родителей div с id=show

<div id="show"> 
 
    <div id="s1" class="perschoolcontainer"> 
 
\t <a href="abc.jpg" > 
 
\t \t <img id="dp1" class="dp" src="abc.jpg"> 
 
\t </a> 
 
\t <p>Cricket</p> 
 
    </div> 
 
    <div id="s2" class="perschoolcontainer"> 
 
\t <a href="def.jpg" > 
 
\t \t <img id="dp2" class="dp" src="def.jpg"> 
 
\t </a> 
 
\t <p>Tennis</p> 
 
    </div> 
 
    <div id="s3" class="perschoolcontainer"> 
 
\t <a href="ghi.jpg" > 
 
\t \t <img id="dp3" class="dp" src="ghi.jpg"> 
 
\t </a> 
 
\t <p>Tennis</p> 
 
    </div> 
 
</div>

Я хочу скрыть тех детей шоу, у которых нет Теннис в их p. И это начинается с меню выбора.

<ul class="list"> 
 
    <li> 
 
\t <label> 
 
     <input type="checkbox" value="Tennis" class="check">Tennis 
 
    </label> 
 
    </li> 
 
    
 
    <li> 
 
\t <label> 
 
     <input type="checkbox" value="Cricket" class="check">Cricket 
 
    </label> 
 
    </li> 
 
</ul>

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

$(document).ready(function(){ 
 
    if($('input.check').is(':checked')){ 
 
\t var value = $.trim($(this).val()); 
 
\t if(value != $trim($("#show").children(".perschoolcontainer").children("p").text())){ 
 
\t \t $(this).parents("div").css("display","none"); 
 
\t } 
 
    } 
 
});

Что случилось с функцией Jquery здесь. В основном предполагается собирать выбранное значение. Затем он проходит в #show, и если текст не равен значению, то родительский div этого элемента должен быть скрыт.

Thnx заранее :)

Answer 1

Вам нужно настроить переключатель, а также использовать событие вместо простого if заявления.

Вы также должны использовать функцию jQuery.each(), потому что есть несколько элементов, и вы хотите их прокрутить, а затем проверить текст в них. Вы можете легко подключить в <p> тег с помощью простого выбора, вместо того, чтобы сделать .children() ... и т.д.

$(document).on('change', 'input.check', function(){ 
    var $input = $(this); 
    var checkboxValue = $input.val(); 

    $('#show .perschoolcontainer > p').each(function(){ 
     if($(this).text() == checkboxValue && $input.is(':checked')) { 
      $(this).parent().hide(); 
     } 
     else if($(this).text() == checkboxValue && !$input.is(':checked')) { 
      $(this).parent().show(); 
     } 
    } 
}); 

Answer 2

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

$(function() { 
 

 
    $(document).on('change', '.check', function() { 
 
    var checkVal = $('.check:checked').val(); 
 
    $('#show .perschoolcontainer p').each(function() { 
 
     if ($(this).text() == checkVal) { 
 
     $(this).closest('.perschoolcontainer').hide(); 
 
     } else { 
 
     $(this).closest('.perschoolcontainer').show(); 
 
     } 
 
    }); 
 
    }); 
 
    
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div id="show"> 
 
    <div id="s1" class="perschoolcontainer"> 
 
\t <a href="abc.jpg" > 
 
\t \t <img id="dp1" class="dp" src="abc.jpg"> 
 
\t </a> 
 
\t <p>Cricket</p> 
 
    </div> 
 
    <div id="s2" class="perschoolcontainer"> 
 
\t <a href="def.jpg" > 
 
\t \t <img id="dp2" class="dp" src="def.jpg"> 
 
\t </a> 
 
\t <p>Tennis</p> 
 
    </div> 
 
    <div id="s3" class="perschoolcontainer"> 
 
\t <a href="ghi.jpg" > 
 
\t \t <img id="dp3" class="dp" src="ghi.jpg"> 
 
\t </a> 
 
\t <p>Tennis</p> 
 
    </div> 
 
</div> 
 

 
<ul class="list"> 
 
    <li> 
 
\t <label> 
 
     <input type="checkbox" value="Tennis" class="check">Tennis 
 
    </label> 
 
    </li> 
 
    
 
    <li> 
 
\t <label> 
 
     <input type="checkbox" value="Cricket" class="check">Cricket 
 
    </label> 
 
    </li> 
 
</ul>

Answer 3

Полное решение, я добавил также проверить изменения флажок.

$(document).ready(function(){ 

    var inputs=$("input[type='checkbox']"); 
    var divs=$("div.perschoolcontainer"); 

    //function checks checkboxes and show only does divs with text containng with value from checkbox 
    function checkInputs(){ 

    //hide all 
    divs.hide(); 


    for (var i=0; i<inputs.length; i++){ 

     if (inputs.eq(i).prop("checked")){ 
     //checkbox is checked 
     var value = $.trim(inputs.eq(i).val()); 
     //show does with p and text in it 
     divs.find("p:contains('"+value+"')").parent().show(); 
     } 

    } 

    } 

//after web starts check checkboxes 
checkInputs(); 


inputs.on("change",function(){ 
    //on checkbox change 
    checkInputs(); 
}); 

}); 

Рабочий код - https://plnkr.co/edit/h5IU1J7ErfYKrsAERSE7?p=preview