如何更改/删除兄弟姐妹方法

Question

I grabbed this code when I was searching other questions, but when I tried to fit it to my needs I hit a problem. As my links are spread across two parent divs, it doesn't interact correctly with the other siblings.

    var make_button_active = function () {
    //Get item siblings
    var siblings = ($(this).siblings());
    //Remove active class on all buttons
    siblings.each(function (index) {
        $(this).removeClass('active');
    });


    //Add the clicked button class
    $(this).addClass('active');
}

$(document).ready(function () {
    $(".clicked").click(make_button_active);
});

Here is the Fiddle

If you click Link 1 and then click Link 6 for example, Link 1 stays highlighted when Link 6 highlights also.

Link 1-3 interact with each other and 4-6 do as well, but separately. How cna I get them to all talk to each other and highlight on/off?

Answer 1

Updated your Fiddle . Initially, you were only selecting the siblings (implies all under one parent). But you need to select across parents and hence siblings would not work. Instead you have to use a generic identifier - .clicked in this case.

Just change the following line:

var siblings = ($(this).siblings());

to:

var siblings = $('.clicked');