Combining Multiple jQuery

Question

I have the following two functions that do the same thing, any way I can combine these two functions into a single function?

$(document).ready(function(){
    $("#nav li").click(function(e) {
        e.preventDefault();
        $("#nav li").removeClass("current_page_item");
        $(this).closest("li").addClass("current_page_item");
    });
    $("#overlay li").click(function(e) {
        e.preventDefault();
        $("#overlay li").removeClass("current_page_item");
        $(this).closest("li").addClass("current_page_item");
    });
});

Thanks,
Josh

why not just add the same class to both the ul then you can target that class - after all that's what class names are meant, targeting like elements (or just add the class to the li and target them directly - will make your jquery selector a lot more efficient) — Pete
– Pete, Commented Mar 18, 2019 at 17:11

jspcal · Accepted Answer · 2019-03-18 16:57:21Z

5

You could use a pair of selectors combined with a comma. The matching elements for both selectors will be returned:

$("#nav li, #overlay li").click(function(e) {
    e.preventDefault();
    $(this).closest('#nav, #overlay').find('li').removeClass("current_page_item");
    $(this).closest("li").addClass("current_page_item");
});

To deselect the other elements when this is clicked, find the ancestor matching the container ID (nav or overlay), and remove the current_page_item class from the descendant li elements.

edited Mar 18, 2019 at 16:57

answered Mar 18, 2019 at 16:49

jspcal

52k7 gold badges76 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Taplar Over a year ago

$(this) to $(this).closest('#nav, #overlay').find('li') should allow you to keep the logic and remedy the not changing siblings. Edit: and the closest on the last command is pointless as the this is an li.

joshmrodg Over a year ago

This works great! I tried the comma separating the selectors on the function, but missed it on the this.closest...thanks!

Collectives™ on Stack Overflow

Combining Multiple jQuery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related