Help with jQuery .next

Question

I think I could use .next on this, not sure, if there's a better way please let me know. I have a tab set up with an UL, each LI in the UL has a 1px dotted border on the bottom except the "active" li. The "active" tab has a background image. I need to remove the border if the LI after any LI has the class active.

<ul id="flowtabs">
  <li><a href="t1">Analysis</a></li>
  <li><a href="t2">Manual Trading</a></li>
  <li><a href="t3" class="active">Automatic Trading</a></li>
  <li><a href="t4">Simulate</a></li>
  <li><a href="t5">Connect</a></li>
  <li><a href="t6">Extend</a></li>
</ul>

$(document).ready(function() {
    if($('#flowtabs li a').hasClass('active').next('css','border','none')
}

I would want <a href="t2"> and <a href="t4"> to have their border removed, and have this applied any time a li has the class active.

I don't think the construction is right, is there a better way to remove the border from the LI before and after the one that has the class 'active'

here's an image to help: http://img693.imageshack.us/img693/5384/screenshot20100907at147.png

Thanks!

Answer 1

Why not do it the opposite way and add the underline to the li with the active class.

$(document).ready(function() {
    $('#flowtabs li a').hasClass('active').parent('li').css('border','none');
}

However, if you want to do it that way. Then there are some questions. What about li before the active li? Either way next would be targeting the a elements and not the li. This would remove the border from all li's except the one with the active a.

$(document).ready(function() {
    if($('#flowtabs li a').hasClass('active').parent('li').siblings().css('border','none')
}

Answer 2

Hey,

may be you can do something like thisL

$(document).ready(function(){
   $('#flowtabs li a').not('.active').css('border','none');
});

This means any 'a' tag except the one with class 'active' -> remove border.

Answer 3

This does what you specifically asked for, removing the border from the <li>s on either side of the active <li>:

$(function() {
    $('#flowtabs li a.active').parent('li').next().add($('#flowtabs li a.active').parent('li').prev()).css('border','none');
});

Here's a working demo: http://jsfiddle.net/WUu2F/

This does what I think you actually want, which I mentioned in my comment on your question:

$(function() {
    $('#flowtabs li a.active').parent('li').prev().andSelf().children('a').css('border','none');
});

And a demo of that: http://jsfiddle.net/k5sur/

Answer 4

$(document).ready(
    function ()
    {
        $('#flowtabs li a.active').filter(function(i) { return i > 0; }).parent('li').css('border', 'none');
    }
);

http://jsfiddle.net/PxmqG/

This will remove the border around the li a.actives that appear AFTER the first li a.active.

---

Your question is a little confusing, so I think after a second read-through I understand better what you want.

$(document).ready(
    function ()
    {
        $('#flowtabs li a.active').parent('li').prev('li').css('border-bottom','none').end().next('li').css('border-top', 'none');
    }
);

This will remove the borders on the lis BEFORE and AFTER EVERY li a.active. I added this because of your explanation and image.

---

Revision 3

$(document).ready(
    function ()
    {
        $('#flowtabs li a.active').css('border-bottom', 'none').parent('li').prev('li').children('a').css('border-bottom','none');
    }
);

This removes the border from your current and previous li tags. Seems to be what you've been wanting from the beginning, yes?