Afficher les éléments en fonction de la valeur html d'une balise

Question

je voudrais accomplir ce qui suit avec jquery:

Lorsque je clique sur ce lien

<a href="#">Cars</a> 

Je voudrais que tous les divs comme ceux

<div class="product"> 
    <div class="category">Cars</div> 
</div> 

pour faire quelque chose.

Vous avez l'idée, j'ai un menu avec une liste de catégories, et une liste de produits, chacun contenant une div avec le nom de la catégorie, et je voudrais les faire cacher/montrer.

Answer 1

Je ne sais pas si je comprends bien votre question, mais si vous voulez que la div class = « catégorie » voitures à apparaître lorsque le lien de voitures est cliqué, suivez ceci:

$("#menu a").click(function() { 
    var value = $(this).html(); 

    $.each($(".category"), function(i, item) { 
    if ($(item).html() == value) { 
     $(item).parent().hide(); 
    } 

    }); 
}); 

si vous voulez cacher le div juste remplacer $(item).show(); avec $(item).hide();

Answer 2

En supposant:

<a href="#" class="highlight">Cars</a> 

alors:

$("a.highlight").click(function() { 
    $("div.category").removeClass("category") 
    .filter(":contains(" + $(this).text() + ")").addClass("highlight"); 
    return false; 
}); 

Ce que cela fait est d'ajouter la classe category à tout category dvis contenant le texte du lien. Cela peut être modifié pour modifier le div parent product si vous voulez le faire de cette façon aussi.

Il fonctionne en supprimant d'abord la classe highlight de tous les divs category et en l'ajoutant ensuite à ceux qui en ont besoin.

Answer 3

DEMO:http://jsbin.com/ucewo3/11SOURCE:http://jsbin.com/ucewo3/11/edit

$('a').click(function(e) { 
     var search_term = $.trim($(this).text()); //trim text 
     $('.category').each(function() { 
     ($(this).text().search(new RegExp(search_term , 'i')) < 0)//upper & lower 
     ? $(this).parent().hide() : $(this).parent().show(); 
     }); 
    }); 

Ce garder le texte dans la balise <a> et effectuer une recherche dans le <div class="category"> si le match texte <a> avec .category texte, il montre la connexes .product contenu!

NOTE:

1. le match de script à la fois Majuscules et Minuscules caractères

   exemple correspondance Cars ainsi que cars et CARS

2. correspondent également espacées texte comme <a> cars </a> ainsi que <a>cars</a> et <a>cars </a>

3. Correspondre aussi texte tagués comme <div class="category"><span>cars</span></div>