CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Eric G
Eric G

Reputation: 926

Multiple ID jQuery Selector returns different than when a single ID selector

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 multiple ids selector

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 () {...}

Single ID selector

Upvotes: 2

Views: 68

Answers (2)

DaniP
DaniP

Reputation: 38252

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.

Upvotes: 3

cssyphus
cssyphus

Reputation: 40076

I think this might be what you were aiming for:

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

Upvotes: 2

Related Questions