Question

The following opens the first tab upon document being ready.
I simply want to keep this functionality but would like to add a constraint:
if the parent Li class is hidden, don’t do it. If this is too complex, I could also add a class to <a/> and say if it is of this type then don’t do it.

<ul id="attached_deals_tab" class="nav nav-tabs">
   <input id="id_deals-0-id" type="hidden" name="deals-0-id">
   <li class="hidden">
       <a data-toggle="tab" href="#X">X</a>
    </li>
</ul>


$('#attached_deals_tab').find('a:first').tab('show');

Would that be even possible?

Answer 1

Assuming the a:first is inside the first li that is visible you could just do this:

$('#attached_deals_tab li:first:visible a:first').tab('show');

If you absolutely wanted to do it depending on not having the class hidden then you can do:

$('#attached_deals_tab li:not(.hidden) a:first').tab('show');

And you can combine :first, :not, :visible etc.

Another tip is to work your way towards the selector by trying bits of the jQuery selector from left to right and see if in Firebug, you’re finding the right elements in the dom.

eg. just doing $('#attached_deals_tab li:not(.hidden)) in your Firebug console should return a dom object that you can just click to go to that element selected in HTML view.