Cars ...">
Have Geek Brain

Show elements based on html tag value

I would like to accomplish the following with jquery:

When I click on this link

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

I would like all divs to be like this

<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 a category name, and I would like them to hide / show.

+2


a source to share


3 answers


I'm not sure if I fully understand your question, but if you want cars in the class = div to appear when the car link is clicked, follow these steps:

$("#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()

; from$(item).hide();

+8


a source


Assuming that:

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

then



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

What it means is add a class category

to any category

dvis that contains link text. This can be changed to change the parent product

div if you want to do that too.

It works by first removing the class highlight

from all category

divs and then adding it to those that require it.

+2


a source


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();  
       });  
    });

Save the text inside the tag <a>

and search in <div class="category">

, if the text <a>

matches the text .category

, it shows related content .product

!

Note:

  • script correspond to symbols Upper and Lower Case

    example Cars

    , and Cars

    andCars

  • also correspond spaced text like <a> cars </a>

    , as well as <a>cars</a>

    and<a>cars </a>

  • also matches the tagged tag like<div class="category"><span>cars</span></div>

  

+1


a source






More articles:


All Articles