jQuery, счетчик ребенка и результат отображения при зависании

Question

Я реализую алфавитный поиск продуктов. При нажатии на букву отображаются все продукты, начинающиеся с письма. Но я бы разглядел его в верхней части письма и спрятал раньше.

Должен ли я использовать функции hover() и append() и как?

, что мой код:

_alphabets.hover(function(){ 
var _letter = $x(this), _text = $x(this).text(), _count = 0; 

_contentRows.removeClass("lignetrouve"); 

_contentRows.each(function(i) { 
var _cellText = $x(this).children('td').eq(0).text(); 
if (RegExp('^' + _text).test(_cellText)) { 
_count += 1; 
list = $x(this).addClass("lignetrouve"); 
} 

}); /*end _contentRows.each(function(i) */ 

//we count number of child 
_nblignes = $x('.lignetrouve').length; 

//display 
$x('.compteur').append(_nblignes); 

}) 

Спасибо.

Answer 1

я нашел:

_alphabets = $x('.alphabet > a'); 
_contentRows = $x('#produits-table tbody tr'); 


_alphabets.click(function() { 
    var _letter = $x(this), _text = $x(this).text(), _count = 0; 
    //Ajout de la class active a la lettre plutot qu'a l'alphabet entier 
    _alphabets.removeClass("active"); 
    _letter.addClass("active"); 
    _contentRows.removeClass("lignetrouve"); 


    if (($x('#noproduct').length == 0) && ($x('.lignetrouve').length == 0)) { 
    $x('tbody').append('<tr id="noproduct"><td>Aucun produit</td></tr>'); 
    }; 

    _contentRows.hide(); 

    _contentRows.each(function(i) { 
     //Affectation de la variable celltext qui contient le contenu 
     var _cellText = $x(this).children('td').eq(0).text(); 
     //Si le debut commence comme la lettre selectionnée 
     if ( RegExp('^' + _text).test(_cellText)) { 
      _count += 1; 
      list = $x(this).fadeIn(400); 
      list.addClass("lignetrouve"); 
      $x('#noproduct').remove(); 

     } 

    _nblignes = $x('.lignetrouve').length; 

    $x(this).attr('data-title',_nblignes); 


    }); /*end _contentRows.each(function(i) */ 


}); /*end _alphabets.click(function() */ 

_alphabets.hover(function(){ 
    _contentRows.removeClass("lignetrouve"); 

    var _letter = $x(this), _text = $x(this).text(), _count = 0; 


    _contentRows.each(function(i) { 

     var _cellText = $x(this).children('td').eq(0).text(); 


     if ( RegExp('^' + _text).test(_cellText)) { 
      _count += 1; 
      //on ajoute une class pour le calcul 
      list = $x(this).addClass("lignetrouve"); 

     } 
    }); /*end _contentRows.each(function(i) */ 


    _nblignes = $x('.lignetrouve').length; 


    $x(this).attr('data-title',_nblignes); 

}); /*end _alphabets.hover(function() */ 

Jsfiddle