jQuery .each question

Je travaille sur un projet, ce qui m'oblige à sélectionner un élément de la catégorie navigation, qui contient un attribut "rel" comme (catégorie-action, catégorie-aventure, etc). Comme vous pouvez le voir sur ma démo: My Demo Script, cela fonctionne sur les deux premières catégories, cependant, cela ne fonctionne pas avec les deux dernières. Pourquoi est-ce? et comment puis-je le réparer?jQuery .each question

Voici mon script actuel:

$(document).ready(function() 
{ 
    $("#sidebar ul li a").each(function() 
    { 
     var categories = $(this).attr("rel"); 
     var entries = $("#content-main .blog-entry").attr("rel").split(" ") 

     $(this).hover(function() 
     { 
      for(i = 0; i < entries.length; i++) 
      { 
       if(entries[i] == categories) 
       { 
        $("#content-main .blog-entry[rel~="+categories+"]").each(function() 
        { 
         $("#content-main .blog-entry[rel~="+categories+"]").addClass("match"); 
        }); 
       } 
      } 
     }, 
     function() 
     { 
       $("#content-main .blog-entry[rel~="+categories+"]").each(function() 
       { 
        $("#content-main .blog-entry[rel~="+categories+"]").removeClass("match"); 
       }); 
     }); 
    }); 
});

et voici mon fichier html, si vous ne voulez pas voir la page web ... bien que je suggère fortement le visionnement.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Big Fish Challenge</title> 
    <link href="static/css/foo.css" type="text/css" media="all" rel="stylesheet" /> 
    <link href="static/css/common.css" type="text/css" media="screen" rel="stylesheet" /> 
</head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script> 
    <script src="static/js/common.js" type="text/javascript"></script> 
<body> 
<!-- primary container --> 
    <div id="container"> 
     <!-- site header --> 
      <div id="header"> 
       <h1><a href="index.html">ClassicGamer.com</a></h1> 
      </div> 
     <!--/site header --> 
     <!-- content wrapper --> 
      <div class="clearfix" id="content-wrapper"> 
       <!-- sidebar --> 
        <div class="float_left" id="sidebar"> 
         <h3 class="header-categories">Categories</h3> 
         <ul> 
          <li><a href="#" rel="category-action">Action</a></li> 
          <li><a href="#" rel="category-adventure">Adventure</a></li> 
          <li><a href="#" rel="category-card-games">Card Games</a></li> 
          <li><a href="#" rel="category-rpg">RPG</a></li>              
         </ul> 
        </div> 
       <!--/sidebar -->  
       <!-- content main --> 
        <div class="float_left" id="content-main"> 
         <div class="blog-entry" rel="category-action category-adventure"> 
          <h1>My Action Game</h1> 
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc id nibh purus. Aliquam interdum commodo libero, quis aliquet massa lobortis vel. Nunc rhoncus ullamcorper nulla, ac molestie lorem blandit a. Pellentesque ut massa tellus[...]</p> 
         </div> 
         <div class="blog-entry" rel="category-action"> 
          <h1>My Action Game</h1> 
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc id nibh purus. Aliquam interdum commodo libero, quis aliquet massa lobortis vel. Nunc rhoncus ullamcorper nulla, ac molestie lorem blandit a. Pellentesque ut massa tellus[...]</p> 
         </div> 
         <div class="blog-entry" rel="category-rpg"> 
          <h1>My Action Game</h1> 
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc id nibh purus. Aliquam interdum commodo libero, quis aliquet massa lobortis vel. Nunc rhoncus ullamcorper nulla, ac molestie lorem blandit a. Pellentesque ut massa tellus[...]</p> 
         </div>             
        </div> 
       <!--/content main --> 
      </div> 
     <!--/content wrapper --> 
     <!-- footer --> 
      <div id="footer"> 

      </div> 
     <!--/footer --> 
    </div> 
<!--/primary container --> 
</body> 
</html>

Un million grâce à ceux qui répondent, merci pour votre temps.

Source

2010-10-31 Fo0

Vous pouvez simplifier tout votre code javascript pour

$('#sidebar li a').hover(
    function(){ 
     $('div[rel*=' + $(this).attr('rel') +']').addClass('match'); 
     }, 
    function(){ 
     $('div[rel*=' + $(this).attr('rel') +']').removeClass('match'); 
    } 
);

et encore plus simple serait d'utiliser this.rel au lieu de l'équivalent jquery $(this).attr('rel') que @lonesomeday a commenté ..

Source

2010-10-31 22:57:12

+1 Grande réponse. Encore plus simple, cependant, serait 'this.rel'. – lonesomeday

@lonesomeday, très vrai .. en l'ajoutant .. –

jQuery .each question

Répondre

Questions connexes