I have the following code
<div class="team-grid">
<div class="cssgrid-wrapper">
<div class="cssgrid-container">
<div class="tmb">
<div class="t-inside ">
<div class="t-entry-text">
<div class="t-entry-text-tc">
<div class="t-entry">
<p class="t-entry-meta">
<span class="t-entry-category t-entry-tax">
<a href="#">Category one</a>
</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tmb">
<div class="t-inside ">
<div class="t-entry-text">
<div class="t-entry-text-tc">
<div class="t-entry">
<p class="t-entry-meta">
<span class="t-entry-category t-entry-tax">
<a href="#">Category two</a>
</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
and I’d like to use javascript to enclose every tag’s text with a that has the class ‘hide’ if the a tag has a grandparent with the class ‘team-grid’ and parent with the class ‘t-entry-category’.
So in the above example the result would be
<div class="team-grid">
<div class="cssgrid-wrapper">
<div class="cssgrid-container">
<div class="tmb">
<div class="t-inside ">
<div class="t-entry-text">
<div class="t-entry-text-tc">
<div class="t-entry">
<p class="t-entry-meta">
<span class="t-entry-category t-entry-tax">
<a href="#"><span class="hide">Category one</span></a>
</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tmb">
<div class="t-inside ">
<div class="t-entry-text">
<div class="t-entry-text-tc">
<div class="t-entry">
<p class="t-entry-meta">
<span class="t-entry-category t-entry-tax">
<a href="#"><span class="hide">Category two</span></a>
</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
any help would be appreciated.