Use jQuery to dynamically change class values based on field values

Question

Here are the different parts of my code

part1

<ul class="tabs">
  <li><a class="tab1" href=""></a></li>
  <li><a class="tab2" href=""></a></li>
  <li><a class="tab3" href=""></a></li>
  ...
</ul>

and part2

<div class="field-items">
  <div class="field-item">tab1</div>
  <div class="field-item">tab3</div>
  ...
</div>

How to make a condition so that if in Part 2 it has the values "tab1" and "tab3", then Part 1 is modified to contain these classes:

<li class="hiden"><a class="tab1" href=""></a></li>
...
<li class="hiden"><a class="tab3" href=""></a></li>
...

dvir · Accepted Answer · 2011-06-07 21:28:18Z

2

Something like this should work for you:

$(document).ready(function(){
    $("div.field-items div.field-item").each(function(){
       $("." + $(this).html()).parent().addClass("hiden");
    }); 
});

answered Jun 7, 2011 at 21:28

dvir

5,1241 gold badge25 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Viktor Bogutskii Over a year ago

Thanks. And how do if such a relationship?<li><a class="tab1" href="">111</a></li> and part2 <div class="field-item">111</div>

SIFE Over a year ago

Would you correct this

.jQuery(document).ready(function($){ 	$('.field-item').each(function() {     var tabname = $(this).text();     if(tabname == 'tab1' || tabname == 'tab3') 	{ 		$('.tabs li a').hasClass(tabname).parent().addClass("hiden"); 	} }); })

.

dvir Over a year ago

@Siteogra: It can be done easily by adding a selector :econtains to jQuery. I've set up an example forking your last jsfiddle: jsfiddle.net/5RzxN/1 Enjoy :)

Tejs · Accepted Answer · 2011-06-07 21:24:03Z

0

Probably something like this:

$('.field-item').each(function()
{
    $('.' + this.innerHTML).addClass('hiden');
});

Maybe a little bit of modification, but should do the trick.

answered Jun 7, 2011 at 21:24

Tejs

41.4k10 gold badges71 silver badges89 bronze badges

Collectives™ on Stack Overflow

Use jQuery to dynamically change class values based on field values

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related