jquery - Slide to an item by its Id instead of Index - .carousel(index)

Question

With the code below, when I click on MY BUTTON, the item number 3 is shown.

$('#myButton').click(function () {
    $('#myCarousel').carousel(3);
});

-

<div id="myCarousel" class="carousel slide">
    <div class="carousel-inner">
        <div class="active item">0</div>
        <div class="item">1</div>
        <div class="item">2</div>
        <div id="myItem3" class="item">3</div>
    </div>
    <!-- Carousel nav -->
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>

    <a id="myButton">MY BUTTON</a>
</div>

Is there a way to show the item by his Id, not his index ?

somehting like that :

$('#myButton').click(function () {
    $('#myCarousel').carousel($('#myItem3'));
});

Answer 1

you could do something like $("#myItem4").prevAll("div").length + 1

this will get all the previous siblings, count them, and add 1... getting it's own index within it's siblings

Edit: I just found some documentation and the carousel has a 0-based index. I had assumed it was 1-based because you said .carousel(4) took you to the 4th item. Since it is 0-based, remove the + 1...

$('#myButton').click(function () {
    $('#myCarousel').carousel($("#myItem4").prevAll("div").length);
});