Sujet : … Afficher les <DIV> qui contiennent des <LI> :visible…

Bonjour, je souhaite mettre en place une carte des réalisations d'un constructeur classées par Ville.

Chaque ville s'inscrit  dans une DIV contenant une LISTE affichant les programmes réalisés dans cette ville, avec deux états possibles : "LIVRÉS / EN COURS"

<div class="filter-commune">VILLE A
<ul class="li_prgm">
<li class="prgm-item"><a href="#'" data-link="livres">programme A1</a></li>
<li class="prgm-item"><a href="#'" data-link="en_cours">programme A2</li>
<li class="prgm-item"><a href="#'" data-link="livres">programme A3</li>
</ul></div>

Sous la carte trois liens permettent de sélectionner :
<tous> -  l'ensemble des programme
<en_cours> - les programmes en cours
<livres> - les programmes livrés

Le script qui masque les programmes livrés ou en cours fonctionne
par contre je n'arrive pas à masquer les DIV n'aficihant aucune réalisation en fonction des choix d'affichage.

L'idée est de masquer les <div> puis de parcourir l'ensemble des <div> et si un de ses <li> est visible alors on affiche la <DIV>, mais manifestement mon code n'est pas bon :-)

Merci d'avance pour votre aide et vos précieuses lumières
Bien à vous – Pascal


    <section id="carte_realisations"><div>

    <div class="filter-commune"><a href="#">Ville A</a><ul class="li_prgm">
        <li class="prgm-item"><a class="link filter-simple-item en_cours" href="#" data-link="en_cours">A1</a></li>
    </ul></div>

    <div class="filter-commune"><a href="#">Ville B</a><ul class="li_prgm">
        <li class="prgm-item"><a class="link filter-simple-item livres" href="#" data-link="livres">B1</a></li>
        <li class="prgm-item"><a class="link filter-simple-item livres" href="#" data-link="livres">B2</a></li>
    </ul></div>

    <div class="filter-commune"><a href="#">Ville C</a>
        <li class="prgm-item"><a class="link filter-simple-item livres" href="#" data-link="livres">C1</a></li>
        <li class="prgm-item"><a class="link filter-simple-item en_cours" href="#" data-link="en_cours">C2</a></li>
    </ul></div>

    <div class="filter-commune"><a href="#">Ville D</a><ul class="li_prgm">
        <li class="prgm-item"><a class="link filter-simple-item livres" href="#" data-link="livres">D1</a></li>
        <li class="prgm-item"><a class="link filter-simple-item livres" href="#" data-link="livres">D2</a></li>
        <li class="prgm-item"><a class="link filter-simple-item en_cours" href="#" data-link="en_cours">D3</a></li>
        <li class="prgm-item"><a class="link filter-simple-item en_cours" href="#" data-link="en_cours">D4</a></li>
    </ul></div>
    </div></section>


    <a class="link filter-prgm" href="#" data-filter="tous">Tous</a>
    <a class="link filter-prgm" href="#" data-filter="en_cours">En cours</a>
    <a class="link filter-prgm" href="#" data-filter="livres">Livrés</a>


    LE SCRIPT

    $(".filter-prgm").click(function(){
    var value=$(this).attr('data-filter');
    if(value==="tous"){$('.filter-simple-item').show('500');}
    else    {
        $(".filter-simple-item").not('.'+value).hide('2000');
        $('.filter-simple-item').filter('.'+value).show('2000');}

    // Masque l'ensemble des DIV puis Affiche les DIV contenant un élément LI:visible
    $('.filter-commune').hide();    
    $('.filter-commune').each(function(){$($(this).find('li')is(":visible")).parent().show();});   
    });

Re : … Afficher les <DIV> qui contiennent des <LI> :visible…

La solution :

$(".filter-prgm").click(function(){var filter=$(this).data('filter');$('.filter-commune').each(function() {var show=filter==="tous"||$(this).has("."+filter).length>0;$(this).toggle(show);});return false;});