CODEWITHSUNDEEP
javascriptjquery
mike23
mike23

Reputation: 1312

Show elements depending on html value of a tag

I would like to accomplish the following with jquery :

When I click on this link 

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

I would like all divs like those 

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

to do something.

You get the idea, I have a menu with a list of categories, and a list of products, each containing a div with the category name, and I would like to make them hide/show.

Upvotes: 2

Views: 481

Answers (3)

Luca Filosofi
Luca Filosofi

Reputation: 31173

DEMO: http://jsbin.com/ucewo3/11 SOURCE: 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();  
       });  
    });

This keep the text inside the <a> tag and make a search into the <div class="category"> if the <a> text match with .category text it show the related .product content!

NOTE:

  1. the script match both Uppercase and Lowercase chars

    example match Cars as well as cars and CARS

  2. also match spaced text like <a> cars </a> as well as <a>cars</a> and <a>cars </a>

  3. match also tagged text like <div class="category"><span>cars</span></div>

​ ​

Upvotes: 1

Germ&#225;n Rodr&#237;guez
Germ&#225;n Rodr&#237;guez

Reputation: 4288

I am not sure if i fully understand your question, but if you want the div class="category" cars to appear when cars link is clicked, follow this:

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

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

   });
});

if you want to hide the div just replace $(item).show(); with $(item).hide();

Upvotes: 8

cletus
cletus

Reputation: 625097

Assuming:

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

then:

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

What this does is add the category class to any category dvis that contain the text of the link. This can be modified to modify the parent product div if you want to do it that way too.

It works by first removing the class highlight from all category divs and then adding it to the ones that require it.

Upvotes: 2

Related Questions