Use jQuery to dynamically change class values based on field values

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 cl开发者_运维百科ass="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>
...

---

Something like this should work for you:

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

---

Probably something like this:

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

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