11521 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Boucle Jquery

Bonjour tout le monde !

Après avoir pas mal cherché sur internet, je recherche une aide ici.

Je cherche à savoir comment faire pour lire tous les éléments de même nom en jquery.

Problème :

j'ai une liste d'articles que je peux filtrer en jquery. Celui-ci fait disparaitre (display: none;) les articles ne correspondant pas aux critères sélectionnés.

Exemple :

<article class="" style="display:none;">
du code
</article>

<article class="" style="display:block;">
du code
</article>

<article class="" style="display:none;">
du code
</article>

Mon soucis est que si aucun article ne correspond aux critères (ça arrive Smiley cligne ), il y a une zone vide. Je souhaite mettre un message "aucun article ne correspond".

J'ai fait ça :

<script>
$('select.jelect-current').click(function() {
$(".container").each(function(){
var test = $('article').attr('style');
if (test =="display: none;"){
$('div.nomatch').html('<p style="font-size:25px;">Nous n\'avons pas de voitures correspondantes pour le moment..</p><p style="font-size:25px;">Pour nous joindre, n\'hésitez pas à composer le : ...</p>');}
if (test !="display: none;"){
$('div.nomatch').html('');}
});
});

</script>

Ca fonctionne à un détail près...il ne se base que sur le premier article !
Si le premier article est caché et que d'autres correspondent, il va quand même afficher le message "Nous n\'avons pas de voitures correspondantes pour le moment."

Le code ne lit pas les "styles" des autres articles.

Merci de votre aide !

Le code de ma page :


<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimal-ui">
<title>Autozone, Vehicle listings</title>
<link href="favicon.png" type="image/x-icon" rel="shortcut icon">
<link href="assets/css/master.css" rel="stylesheet">
<link href="assets/plugins/iview/css/iview.css" rel="stylesheet">
<link href="assets/plugins/iview/css/skin/style.css" rel="stylesheet">

<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="assets/plugins/jquery/jquery-1.11.1.min.js"></script>


<script type='text/javascript'>//<![CDATA[

$(window).load(function(){
jQuery(document).ready(function ($) {
$("select").on("change", function () {
var filterVal1 = $("select#filter1").val();
var filterVal2 = $("select#filter2").val();
var filterVal3 = $("select#filter3").val();
var filterVal4 = $("select#filter4").val();
var filterVal5 = $("select#filter5").val();
var filterVal6 = $("select#filter6").val();
var filterVal7 = $("select#filter7").val();
var filterVal8 = $("select#filter8").val();
var filterVal9 = $("select#filter9").val();
var filterVal10 = $("select#filter10").val();
var filter1Selector = "";
var filter2Selector = "";
var filter3Selector = "";
var filter4Selector = "";
var filter5Selector = "";
var filter6Selector = "";
var filter7Selector = "";
var filter8Selector = "";
var filter9Selector = "";
var filter10Selector = "";


if (filterVal1 == "all" && filterVal2 == "all" && filterVal3=="all" && filterVal4 == "all" && filterVal5 == "all" && filterVal6 == "all" && filterVal7 == "all" && filterVal8 == "all" && filterVal9 == "all" && filterVal10 == "all" ) {
//show all items
$(".item").fadeIn("fast");
} else {
if (filterVal1 != "all") {
filter1Selector = "." + filterVal1;
}
if (filterVal2 != "all") {
filter2Selector = "." + filterVal2;
}
if (filterVal3 != "all") {
filter3Selector = "." + filterVal3;
}
if (filterVal4 != "all") {
filter4Selector = "." + filterVal4;
}
if (filterVal5 != "all") {
filter5Selector = "." + filterVal5;
}
if (filterVal6 != "all") {
filter6Selector = "." + filterVal6;
}
if (filterVal7 != "all") {
filter7Selector = "." + filterVal7;
}
if (filterVal8 != "all") {
filter8Selector = "." + filterVal8;
}
if (filterVal9 != "all") {
filter9Selector = "." + filterVal9;
}
if (filterVal10 != "all") {
filter10Selector = "." + filterVal10;
}

$(".item").hide();
$(filter1Selector + filter2Selector + filter3Selector + filter4Selector + filter5Selector + filter6Selector + filter7Selector + filter8Selector + filter9Selector + filter10Selector.replace(/,/g, ".")).fadeIn("fast");

}

});
});

jQuery(document).ready(function ($) {
$("#filter1").chosen();
$("#filter2").chosen();
$("#filter3").chosen();
$("#filter4").chosen();
$("#filter5").chosen();
$("#filter6").chosen();
$("#filter7").chosen();
$("#filter8").chosen();
$("#filter9").chosen();
$("#filter10").chosen();
});

});//]]>



</script>


</head>


<body>

<!-- Loader -->
<div id="page-preloader"><span class="spinner"></span></div>
<!-- Loader end -->


<div id="this-top" class="layout-theme animated-css" data-header="sticky" data-header-top="200" >


<div id="wrapper">

<!-- HEADER -->
<div class="header">
<div class="top-header">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="header-contacts">
<span class="header-contacts__item"><i class="icon fa fa-phone"></i>+ 987 654 3210</span>
<a class="header-contacts__item" href="mailto:autoz@zone.com"><i class="icon fa fa-envelope"></i>autoz (at) zone.com</a>
</div>
<ul class="social-links list-inline">
<li><a class="icon fa fa-facebook" href="javascript:void(0);"></a></li>
<li><a class="icon fa fa-twitter" href="javascript:void(0);"></a></li>
<li><a class="icon fa fa-youtube-play" href="javascript:void(0);"></a></li>
<li><a class="icon fa fa-instagram" href="javascript:void(0);"></a></li>
<li><a class="icon fa fa-google-plus" href="javascript:void(0);"></a></li>
</ul>
</div><!-- end col -->
</div><!-- end row -->
</div><!-- end container -->
</div><!-- end top-header -->


<div class="header__inner">
<div class="container">
<div class="row">
<div class="col-md-12 col-xs-12"> <a href="index.html" class="logo"> <img class="logo__img img-responsive" src="assets/img/logo.png" height="50" width="111" alt="Logo"> </a>
<div class="navbar yamm">
<div class="navbar-header hidden-md hidden-lg hidden-sm">
<button type="button" data-toggle="collapse" data-target="#navbar-collapse-1" class="navbar-toggle"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
<a href="javascript:void(0);" class="navbar-brand"></a> </div>
<div id="navbar-collapse-1" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="home.html">HOME</a></li>
<li><a href="vehicle-listings.html">VEHICLE LISTINGS</a> </li>
<li><a href="car-details.html">CAR DETAILS</a></li>
<li class="dropdown" ><a href="news.html">NEWS</a>
<ul class="dropdown-menu">
<li> <a href="news-grid.html">DROPDOWN</a> </li>
<li> <a href="news-details.html">DROPDOWN</a> </li>
</ul>
</li>
<li><a href="news-grid.html">NEWS GRID</a></li>
<li><a href="news-details.html">NEWS DETAILS</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- end container -->
</div><!-- end header__inner -->
</div><!-- end header -->

<div class="block-title">
<div class="block-title__inner section-bg section-bg_second">
<div class="bg-inner">
<h1 class="ui-title-page">vehicle listings</h1>
<div class="decor-1 center-block"></div>
<ol class="breadcrumb">
<li><a href="javascript:void(0);">HOME</a></li>
<li class="active">listings</li>
</ol>
</div><!-- end bg-inner -->
</div><!-- end block-title__inner -->
</div><!-- end block-title -->

<div class="container">
<div class="row">
<div class="col-md-9">
<main class="main-content">
<div class="sorting">
<div class="sorting__inner">
<div class="sorting__item">
<span class="sorting__title">select View</span>
</div>
<div class="sorting__item">
<span class="sorting__title">Sort by</span>
<div class="select jelect">
<input id="sort" name="sort" value="0" data-text="imagemin" type="text" class="jelect-input">
<div tabindex="0" role="button" class="jelect-current">Last Added</div>
<ul class="jelect-options">
<li class="jelect-option jelect-option_state_active">Last Added</li>
<li class="jelect-option">First Added</li>
</ul>
</div>
</div>
</div>
</div><!-- end sorting -->



















<div class="nomatch"></div>
<article class="item card clearfix recent">
<div class="card__img">
<img class="img-responsive" src="assets/media/cards/1.jpg" height="196" width="235" alt="foto">
</div>
<div class="card__inner">
<h2 class="card__title ui-title-inner">MERCEDES-BENZ SLR MCLAREN</h2>
<div class="decor-1"></div>
<div class="card__description">
<p>In a pickup market gone fancy, the Silverado sticks to its basic-truck recipe. The steering is accurate and the Silverado ...</p>
</div>
<ul class="card__list list-unstyled">
<li class="card-list__row">
<span class="card-list__title">Body Style:</span>
<span class="card-list__info">Sedan</span>
</li>
<li class="card-list__row">
<span class="card-list__title">Engine:</span>
<span class="card-list__info">DOHC 24-valve V-6</span>
</li>
<li class="card-list__row">
<span class="card-list__title">Mileage:</span>
<span class="card-list__info">35,000 KM</span>
</li>
<li class="card-list__row">
<span class="card-list__title">Color:</span>
<span class="card-list__info">White</span>
</li>
<li class="card-list__row">
<span class="card-list__title">Transmission:</span>
<span class="card-list__info">6-Speed Auto</span>
</li>
<li class="card-list__row">
<span class="card-list__title">Specs</span>
<span class="card-list__info">2-Passenger, 2-Door</span>
</li>
</ul>
<div class="card__price">PRICE:<span class="card__price-number">$33,905</span></div>
</div>
</article>







<article class="item card classique clearfix suv">
<div class="card__img">
<img class="img-responsive" src="assets/media/cards/2.jpg" height="196" width="235" alt="foto">
<span class="card__wrap-label"><span class="card__label">FEATURED</span></span>
</div>
<div class="card__inner">
<h2 class="card__title ui-title-inner">MBENTLEY CONTINENTAL Supersports</h2>
<div class="decor-1"></div>
<div class="card__description">
<p>In a pickup market gone fancy, the Silverado sticks to its basic-truck recipe. The steering is accurate and the Silverado ...</p>
</div>
<ul class="card__list list-unstyled">
<li class="card-list__row">
<span class="card-list__title">Body Style:</span>
<span class="card-list__info">Sedan</span>
</li>
<li class="card-list__row">
<span class="card-list__title">Engine:</span>
<span class="card-list__info">DOHC 24-valve V-6</span>
</li>
<li class="card-list__row">
<span class="card-list__title">Mileage:</span>
<span class="card-list__info">35,000 KM</span>
</li>
<li class="card-list__row">
<span class="card-list__title">Color:</span>
<span class="card-list__info">White</span>
</li>
<li class="card-list__row">
<span class="card-list__title">Transmission:</span>
<span class="card-list__info">6-Speed Auto</span>
</li>
<li class="card-list__row">
<span class="card-list__title">Specs</span>
<span class="card-list__info">2-Passenger, 2-Door</span>
</li>
</ul>
<div class="card__price">PRICE:<span class="card__price-number">$29,415</span></div>
</div>
</article>





</main><!-- end main-content -->
</div><!-- end col -->






<div class="col-md-3">
<aside class="sidebar">
<section class="widget widget_mod-a">
<h6 class="widget-title">Véhicule</h6>
<div class="decor-1"></div>

<select class="jelect-current" id='filter1'>
<option value='all'>Tous</option>
<option value="recent">Récent</option>
<option value="classique">Classique</option>
</select>
<br><br>
<h6 class="widget-title">Type</h6>
<div class="decor-1"></div>
<select class="jelect-current" id='filter2'>
<option value='all'>Tous</option>
<option value="en_france">En France</option>
<option value="affaire_du_moment">Affaire du moment</option>
</select>
<br><br>
<h6 class="widget-title">Marque</h6>
<div class="decor-1"></div>
<select class="jelect-current" id='filter3'>
<option value='all'>Toutes</option>
<option value="chevrolet">Chevrolet</option>
<option value="dodge">Dodge</option>
<option value="ford">Ford</option>
<option value="gmc">Gmc</option>
<option value="infiniti">Infiniti</option>
<option value="nissan">Nissan</option>
<option value="plymouth">Plymouth</option>
<option value="pontiac">Pontiac</option>
</select>
<br><br>
<h6 class="widget-title">Modèle</h6>
<div class="decor-1"></div>
<select class="jelect-current" id='filter4'>
<option value='all'>Tous</option>
<option value="100">100</option>
<option value="bel_air">Bel air</option>
<option value="c10">C10</option>
<option value="camaro">Camaro</option>
<option value="challenger">Challenger</option>
<option value="charger">Charger</option>
<option value="chevelle">Chevelle</option>
<option value="corvette">Corvette</option>
<option value="cuda">Cuda</option>
<option value="dart">Dart</option>
<option value="deuce">Deuce</option>
<option value="durango">Durango</option>
<option value="Edge">Edge</option>
<option value="explorer">Explorer</option>
<option value="f100">F100</option>
<option value="firebird">Firebird</option>
<option value="flex">Flex</option>
<option value="gt">Gt</option>
<option value="gto">Gto</option>
<option value="gtx">Gtx</option>
<option value="impala">Impala</option>
<option value="murano">Murano</option>
<option value="mustang">Mustang</option>
<option value="nova">Nova</option>
<option value="qx80">Qx80</option>
<option value="ram">Ram</option>
<option value="raptor">Raptor</option>
<option value="road_runner">Road runner</option>
<option value="trans_am">Trans am</option>
</select>
<br><br>
<h6 class="widget-title">Version</h6>
<div class="decor-1"></div>
<select class="jelect-current" id='filter5'>
<option value='all'>Toutes</option>
<option value="coupe">Coupé</option>
<option value="cabriolet">Cabriolet</option>
<option value="berline">Berline</option>
<option value="suv">SUV</option>
<option value="pickup">Pickup</option>
</select>
<br><br>
<h6 class="widget-title">Motorisation</h6>
<div class="decor-1"></div>
<select class="jelect-current" id='filter6'>
<option value='all'>Toutes</option>
<option value="v6">V6</option>
<option value="v8">V8</option>
</select>
<br><br>
<h6 class="widget-title">Année</h6>
<div class="decor-1"></div>
<select class="jelect-current" id='filter7'>
<option value='all'>Toutes</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2000_2007">2000 - 2007</option>
<option value="avant_2000">Avant 2000</option>
</select>
<br><br>
<h6 class="widget-title">Boite</h6>
<div class="decor-1"></div>
<select class="jelect-current" id='filter8'>
<option value='all'>Toutes</option>
<option value="automatique">Automatique</option>
<option value="manuelle">Manuelle</option>
<option value="sequentielle">Séquentielle</option>
</select>
<br><br>
<h6 class="widget-title">Prix</h6>
<div class="decor-1"></div>
<select class="jelect-current" id='filter9'>
<option value='all'>Tous</option>
<option value="0_15k">De 0€ à 15000€</option>
<option value="15k_25k">De 15000€ à 25000€</option>
<option value="25k_35k">De 25000€ à 35000€</option>
<option value="35k_50k">De 35000€ à 50000€</option>
<option value="over_50k">+ 50000€</option>
</select>
<br><br>
<h6 class="widget-title">Couleurs</h6>
<div class="decor-1"></div>
<select class="jelect-current" id='filter10'>
<option value='all'>Toutes</option>
<option value="noire">Noire</option>
<option value="grise">Grise</option>
<option value="rouge">Rouge</option>
<option value="blanche">Blanche</option>
<option value="bleue">Bleue</option>
<option value="jaune">Jaune</option>
<option value="orange">Orange</option>
<option value="verte">Verte</option>
<option value="violette">Violette</option>
<option value="marron">Marron</option>
<option value="bronze">Bronze</option>
<option value="bordeaux">Bordeaux</option>
</select>
</section>
</div><!-- end wrap-filter -->


</aside>
</div><!-- end col -->
</div><!-- end row -->
</div><!-- end container -->
<!--Start of Zopim Live Chat Script-->
<script type="text/javascript">
window.$zopim||(function(d,s){var z=$zopim=function(c){z._.push(c)},$=z.s=
d.createElement(s),e=d.getElementsByTagName(s)[0];z.set=function(o){z.set.
_.push(o)};z._=[];z.set._=[];$.async=!0;$.setAttribute('charset','utf-8');
$.src='http://v2.zopim.com/?mpnQGxIkXjNBM8R2DawMeWKFXjGY8j91';z.t=+new Date;$.
type='text/javascript';e.parentNode.insertBefore($,e)})(document,'script');
</script>
<!--End of Zopim Live Chat Script-->



<footer class="footer">
<div class="wrap-section-border">
<section class="section_mod-h section-bg section-bg_second">
<div class="bg-inner border-section-top border-section-top_mod-b">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h2 class="footer-title">auto <span class="footer-title__inner">ZONE</span></h2>
<div class="decor-1 decor-1_mod-b"></div>
</div><!-- end col -->
</div><!-- end row -->

<div class="row">
<div class="col-xs-12">
<div class="footer__name">: SHOWROOM LOCATION :</div>
<div class="footer__text">32 Market St.128, Deeja Town, Florida, CA 12345</div>
</div><!-- end col -->
</div><!-- end row -->
<div class="row">
<div class="col-xs-12">
<div class="footer__item">
<span class="footer__name">Phone:</span>
<span class="footer__text">+1 (234) 567 8900</span>
</div>
<div class="footer__item">
<span class="footer__name">Fax:</span>
<span class="footer__text">+1 (234) 567 8998</span>
</div>
<div class="footer__item">
<span class="footer__name">email:</span>
<span class="footer__text">info@autozone.com</span>
</div>
<div class="footer__item">
<span class="footer__name">Hours:</span>
<span class="footer__text">Mon - Fri :: 9am - 6pm</span>
</div>
</div><!-- end col -->
</div><!-- end row -->
<div class="row">
<div class="col-xs-12">
<ul class="social-links list-inline">
<li><a class="icon fa fa-facebook" href="javascript:void(0);"></a></li>
<li><a class="icon fa fa-twitter" href="javascript:void(0);"></a></li>
<li><a class="icon fa fa-youtube-play" href="javascript:void(0);"></a></li>
<li><a class="icon fa fa-instagram" href="javascript:void(0);"></a></li>
<li><a class="icon fa fa-google-plus" href="javascript:void(0);"></a></li>
</ul>
</div><!-- end col -->
</div><!-- end row -->
</div><!-- end container -->
</div><!-- end bg-inner -->
</section><!-- end section_mod-b -->
</div><!-- end wrap-section-border -->
<div class="footer__wrap-btn"> <a class="footer__btn scroll" href="#this-top">top</a> </div>

<div class="copyright">Copyrights 2015 <a class="copyright__link" href="javascript:void(0);">AutoZONE</a> : : All rights reserved</div>
</footer>

</div><!-- end #wrapper -->
</div><!-- end layout-theme -->

<span class="scroll-top"> <i class="fa fa-angle-up"> </i></span>



<!-- SCRIPTS -->
<script src="assets/js/jquery-migrate-1.2.1.js"></script>
<script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/modernizr.custom.js"></script>
<script src="assets/plugins/owl-carousel/owl.carousel.min.js"></script>
<script src="assets/js/waypoints.min.js"></script>
<script src="assets/plugins/prettyphoto/js/jquery.prettyPhoto.js"></script>
<script src="../../cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="assets/plugins/jelect/jquery.jelect.js"></script>
<script src="assets/plugins/nouislider/jquery.nouislider.all.min.js"></script>


<!--THEME-->
<script src="assets/js/cssua.min.js"></script>
<script src="assets/js/wow.min.js"></script>
<script src="assets/js/custom.js"></script>

<script>
$('select.jelect-current').click(function() {
$(".container").each(function(){
var test = $('article').attr('style');
//alert (test);
if (test =="display: none;"){
$('div.nomatch').html('<p style="font-size:25px;">Nous n\'avons pas de voitures correspondantes pour le moment..</p><p style="font-size:25px;">Pour nous joindre, n\'hésitez pas à composer le : ...</p>');}
if (test !="display: none;"){
$('div.nomatch').html('');}
});
});

</script>

</body>

</html>

>
Modifié par Nicolasffhfh (02 Jul 2016 - 16:11)
Administrateur
Bonjour et bienvenue, Smiley smile

ah combien de km de code ? Smiley eek

En me contentant de lire le script : dans la "boucle" each() donc autant de fois qu'il y a de .container, tu resélectionnes tous les éléments article (de la page) puis demande la valeur d'un attribut. Comme ça ne peut être que l'attribut d'un seul élément, jQuery ne garde que le tout premier élément article (de la page) et continue avec l'attribut style de celui-ci.
Ca ne sélectionne pas les article de chaque .container comme tu pourrais l'espérer.
Et comme il n'y a pas de boucle dans la boucle, pas tous les article de la page non plus.

Pour sélectionner tous les article dans chaque .container, il faudrait que tu utilises, dans ton .each(), $(this) qui va faire référence à chacun des éléments ayant la classe .container. Fais un console.log( $(this) ); et regarde dans la console F12 pour mieux comprendre.
Ensuite il faudrait utiliser .find() (quelque chose comme $(this).find('article') ) pour lister tous les article dans LE .container traité à un moment donné dans ton .each()
Puis compter le nombre d'élément(s) article ayant display: none ou pas et si tous l'ont (aucun n'en a pas) alors afficher ce message. C'est plutôt compliqué.
Mieux vaudrait créer une règle 
.js-hidden {display: none}
et rajouter/enlever cette classe sur les éléments à filtrer.
Alors un $(this).find('article').not('js-hidden') (j'espère que j'utilise bien .not(), je te laisse vérifier dans la doc de jQuery) te renverra le nombre d'éléments encore visibles dans chaque .container(). Si c'est égal à 0 alors c'est qu'il faut afficher ce message...
Bonjour et merci de la réponse !
J'ai trouvé la solution entre temps entre temps :

$( document ).ready(function() {
var block = $('article').size();
$('span.nb').html(block);
$(".jelect-current").click(function() {
//var test = $('article').attr('style');
var none = $('article[style="display: none;"]').size();
result = block - none;
$('span.nb').html(result);
if (result ==0){
$('span.s').text('');
$('span.ent').text('');
$('div.nomatch').html('<p style="font-size:25px;">Nous n\'avons pas de voiture correspondante pour le moment...</p><p style="font-size:25px;">Pour nous joindre, n\'hésitez pas à composer le : 02.31.39.77.91</p>');}
if (result !=0){
$('span.s').text('s');
$('span.ent').text('ent');
$('div.nomatch').html('');}

Avec la fontion .size().
La variable block compte le nombre d'élément article, la variable none compte le nombre d'élément article avec l'attribut display none, puis je fais un simple calcul. Si résultat = 0 alors tu m'affiches le message.
Je vais réduire la taille du code mais j'avais besoin de tout sur la même page pour avoir une vue d'ensemble Smiley biggrin
Ca fonctionne niquel !

Merci !
Sujet clos
Aller à