Question

Using this jquery code I am trying to change the display from none to block for the
second ul under Sale which is under Belts (It has a belts-1 href). The below code
should be accessing the second element but its not. What am I doing wrong?

$currentCategory = "Belts";
$(".sideCatMenu a:contains('" + currentCategory + "') ul").next(ul).eq(2).css('display', 'block');

I am searching this list

<li class="active"><a href="/sale/" class="parentSide">Sale</a><ul style="display: block;" class="subcat">
<li><a href="/accessories-3/">Accessories</a><ul style="display: none;">
<li><a href="/bags-1/">Bags</a></li>
<li><a href="/wristbands/">Wristbands</a></li>
<li><a href="/dog-collars/">Dog Collars</a></li>
<li><a href="/wallets/">Wallets</a></li>

</ul>
</li>
<li><a href="/ten-dollar-buckles/">Ten Dollar Buckles</a></li>
<li><a href="/belts-1/">Belts</a><ul style="display: none;">
<li><a href="/28-belts/">28" Belts</a></li>
<li><a href="/30-belts/">30" Belts</a></li>
<li><a href="/32-belts/">32" Belts</a></li>
<li><a href="/34-belts/">34" Belts</a></li>
<li><a href="/36-belts/">36" Belts</a></li>
<li><a href="/38-belts/">38" Belts</a></li>
<li><a href="/40-belts/">40" Belts</a></li>
<li><a href="/42-belts/">42" Belts</a></li>
<li><a href="/44-belts/">44" Belts</a></li>
<li><a href="/46-belts/">46" Belts</a></li>
<li><a href="/48-and-larger-belts/">48" and Larger Belts</a></li>

</ul>
</li>

</ul>
</li>

Answer 1

1 – Your anchor doesn’t have ul child so:

$(".sideCatMenu a:contains('" + currentCategory + "') ul")

Doesn’t select any element, it should be:

$(".sideCatMenu a:contains('" + currentCategory + "')")

2 – You should wrap the ul with quotation marks:

next('ul')

3 – next only selects one element, so using eq in your code doesn’t make sense.

4 – In you code currentCategory is undefined as you have a variable named $currentCategory not currentCategory.

Well, let’s try this:

$(".sideCatMenu a:contains('"+$currentCategory+"')").next('ul').show()