javascript / jquery获取div的ID

Question

I have two divs like so:

First Div

<div class="carousel">
   <div class="item active" id="ZS125-48A">...</div>
   <div class="item" id="FFKG-34">...</div>
   <div class="item" id="DSSS-56">...</div>
   <div class="item" id="ZSFD-48A">...</div>
</div>

Second Div

<section class="contentBikeTabbedMenus">
   <div id="ZS125-48ATab" class="active" "="">...</div>
   <div id="FFKG-34Tab" class="" "="">...</div>
   <div id="DSSS-56Tab" class="" "="">...</div>
   <div id="ZSFD-48ATab" class="a" "="">...</div>
</section>

The first div is a simpled down version of a carousel i have on the page with items like so. I am able to get the id of the active item and store this ready for use.

For the second div i am trying to get the id of the same div with the same id appended with the word 'Tab'.

Heres my code:

    // get the carousel
    var $carousel = $(".carousel");
    var $active = $carousel.find(".item.active").attr('id');
    var $bikeId = $active;
    var $bikeIdTab = $bikeId + "Tab";

    //This prints out the correct id of the item with the class active.    

    var $tab = $(".contentBikeTabbedMenus");
    var $tabId = $tab.find($bikeIdTab);

    //i am trying to do the same here but i am having no success. 

    console.log($bikeIdTab);
    console.log($tabId);

Logically i thought that i have the correct id of the div i want to find, but it is not returning this.

How can i get the id of the second div that is the same as the first div. so if the first id is ZS125-48A i can find the div with the id ZS125-48ATab.

Thanks

Answer 1

Simply replace

var $tabId = $tab.find($bikeIdTab);

with

var $tabId = $('#'+$bikeIdTab);

Note: I would prefer to avoid the $ as first char of variable name if these are not jQuery Object : it could confuse us.

Answer 2

You need to prepend the ID pre-selector ( # ). For example:

var $tabId = $tab.find('#'+$bikeIdTab);

Also, since IDs should be unique, there's no need to use find() . Specifying the selector on its own should be sufficient:

var $tabId = $('#'+$bikeIdTab);

Answer 3

You just missed the # to find the ID in line 8:

// get the carousel
var $carousel = $(".carousel");
var $active = $carousel.find(".item.active").attr('id');
var $bikeId = $active;
var $bikeIdTab = $bikeId + "Tab";

//This prints out the correct id of the item with the class active.    

var $tab = $(".contentBikeTabbedMenus");
var $tabId = $tab.find('#' + $bikeIdTab);

//i am trying to do the same here but i am having no success. 

console.log($bikeIdTab);
console.log($tabId);