ansaurus

Question

How to add a class depends on value with jquery.

Answer 1

A:

$("a:contains('active'), a:contains('inactive')").each(function() 
{ 
    $(this).addClass($(this).text()); 
});

Perhaps?

Joel Potter 2009-12-15 18:05:22

Answer 2

A:

You could put your default class in, then toggle another class (activeClass) such as

$('a').click(function(myevent) {
    $(this).toggleClass('activeClass');
    myevent.preventDefault();// if you do not want the link to be activated...
});

Note that you do not really need a link 'a' element, for this if you are preventing defaults and a div with text or an image element in it might be better - it has no default you would need to prevent. You could then inject the html in the div with the .html() jQuery or text with the .text().

EDIT1: One other tidbit, you can detect the class automatically using the .hasClass('active') such as:

$(this).click(function()
{
   if ($(this).hasClass('active'))
   {
    // do what you want here
   };
});

Mark Schultheiss 2009-12-15 18:17:22

Answer 3

A:

This would do the trick if you want to set class to the links depending on their text.

<html>
 <head>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"&gt;&lt;/script&gt;
  <style>
    .inactive
    {
    color: red;
    }

    .active
    {
    color: green;
    }
  </style>

  <script type="text/javascript">

   // ensure that the jquery and the page contents has 
   // been loaded, and run the class adding script
   $(document).ready
   (
    function()
    {
     // get all links, and iterate trough them
     $('a').each
     (
      function (index, value)
      {
       // set the class of each item to be equal to its text (or inner html)
       $(value).addClass($(value).html());
      }
     )
    }
   );
  </script>
 </head>
 <body>

  <table>
   <tr valign='top'>
    <td align='center'>21</td>
    <td>Kontakt</td>
    <td>/kontakt.html</td><td align='center'><a href="http://127.0.0.1/ci/index.php/admin/pages/changePageStatus/21"&gt;active&lt;/a&gt;&lt;/td&gt;
    <td align='center'><a href="http://127.0.0.1/ci/index.php/admin/pages/edit/21"&gt;edit&lt;/a&gt; | <a href="http://127.0.0.1/ci/index.php/admin/pages/delete/21"&gt;delete&lt;/a&gt;&lt;/td&gt;
   </tr>
   <tr valign='top'>
    <td align='center'>15</td>
    <td>Web Design Tjenester</td>
    <td>/webdesigndetails.html</td><td align='center'><a href="http://127.0.0.1/ci/index.php/admin/pages/changePageStatus/15"&gt;inactive&lt;/a&gt;&lt;/td&gt;
    <td align='center'><a href="http://127.0.0.1/ci/index.php/admin/pages/edit/15"&gt;edit&lt;/a&gt; | <a href="http://127.0.0.1/ci/index.php/admin/pages/delete/15"&gt;delete&lt;/a&gt;&lt;/td&gt;
   </tr>
    <tr valign='top'>
    <td align='center'>5</td>
    <td>Forsiden</td>
    <td>/forsiden.html</td><td align='center'><a href="http://127.0.0.1/ci/index.php/admin/pages/changePageStatus/5"&gt;active&lt;/a&gt;&lt;/td&gt;
    <td align='center'><a href="http://127.0.0.1/ci/index.php/admin/pages/edit/5"&gt;edit&lt;/a&gt; | <a href="http://127.0.0.1/ci/index.php/admin/pages/delete/5"&gt;delete&lt;/a&gt;&lt;/td&gt;
   </tr>
  </table>

 </body>
</html>

Miljenko Barbir 2010-07-11 07:23:18

if you wish to change the class of the table row depending on the text of the link (it seems more logical to me), you can use $(value).parent().parent().addClass($(value).html());instead of $(value).addClass($(value).html());

Miljenko Barbir 2010-07-11 07:27:21

ansaurus

tags:

views:

answers:

How to add a class depends on value with jquery.

related questions