多个ID jQuery选择器返回的结果与单个ID选择器返回的结果不同

Question

So i have some dropdown menus which I have originally setup to figure out which dropdown has been selected then loads the elements, no problems.

Now I've added a new set of dropdowns and my existing function now applies to this one as well because it was very broad

$(document).on('click', '.dropdown-menu li a', function () {...}

Now i have these dropdowns on 4 different tabs in a modal and I only want the last tab to function differently than the other three, so I want to make a function which works for the original 3 tabs and one for the 4th type of tab.

First three tabs IDS

#racksTab
#condenserTab
#glycolTab

Fourth tab (different) #alertTab

So my question is why do i get different results when my selector uses multiple IDs compared to just 1

$(document).on('click', '#racksTab,#condenserTab,#glycolTab .dropdown-menu li a', function () {...}

This function gives me

But if i make the selector only use one id, it gets the child node i want

$(document).on('click', '#racksTab .dropdown-menu li a', function () {...}

Answer 1

Because with this selector :

#racksTab,#condenserTab,#glycolTab .dropdown-menu li a

You are targeting three elements:

1. Element with Id racksTab

2. Element with Id condenserTab

3. a element inside li child of .dropdown-menu child of Id element glycolTab

I guess you want all elements like the third one, so your selector must be:

#racksTab .dropdown-menu li a, #condenserTab .dropdown-menu li a, #glycolTab .dropdown-menu li a

---

_{Note: Maybe you don't need those selectors at all, I think you can improve your code with a more suitable selector as @j08691 points on the comments, but all will be based on the real markup, if you add it we can help U improve the code.}

Answer 2

我认为这可能是您的目标：

$(document).on('click', '#racksTab .dropdown-menu li a, #condenserTab .dropdown-menu li a, #glycolTab .dropdown-menu li a'