如何使用Jquery获取ID

Question

下面是Html结构。现在我想获得Div ID Inner_1_0, Inner_1_1, Inner_1_2, Inner_1_3等点击nextButton或prevButton使用Jquery。那么我该如何检索。

更多我给了Demo链接…请看演示

<div id="Inner_1_0" class="slideItem" style="width: 600px; height: 440px; top: 0px; right: 165px; opacity: 1; z-index: 17; display: block;">
    <a href="#" onclick="loadVideo(&quot;x_elT6zkqN0&quot;);" title="" oh="" jane="" jaana"="" salman="" khan="" full="" song="" |="" pyaar="" kiya="" toh="" darna="" kya"=""><img src="http://img.youtube.com/vi/x_elT6zkqN0/hqdefault.jpg" width="213px" height="141px" style="width: 600px; height: 400px;"></a>
    <div class="shadow" style="width: 600px; z-index: -1; position: absolute; margin: 0px; padding: 0px; border: none; overflow: hidden; left: 0px; bottom: 0px;">
        <div class="shadowLeft" style="position: relative; float: left;"></div>
        <div class="shadowMiddle" style="position: relative; float: left; width: 400px;"></div>
        <div class="shadowRight" style="position: relative; float: left;"></div>
    </div>
</div>
<div id="Inner_1_1" class="slideItem" style="width: 600px; height: 440px; top: 0px; right: 165px; opacity: 1; z-index: 17; display: block;">
    <a href="#" onclick="loadVideo(&quot;x_elT6zkqN0&quot;);" title="" oh="" jane="" jaana"="" salman="" khan="" full="" song="" |="" pyaar="" kiya="" toh="" darna="" kya"=""><img src="http://img.youtube.com/vi/x_elT6zkqN0/hqdefault.jpg" width="213px" height="141px" style="width: 600px; height: 400px;"></a>
    <div class="shadow" style="width: 600px; z-index: -1; position: absolute; margin: 0px; padding: 0px; border: none; overflow: hidden; left: 0px; bottom: 0px;">
        <div class="shadowLeft" style="position: relative; float: left;"></div>
        <div class="shadowMiddle" style="position: relative; float: left; width: 400px;"></div>
        <div class="shadowRight" style="position: relative; float: left;"></div>
    </div>
</div>
<div id="Inner_1_2" class="slideItem" style="width: 600px; height: 440px; top: 0px; right: 165px; opacity: 1; z-index: 17; display: block;">
    <a href="#" onclick="loadVideo(&quot;x_elT6zkqN0&quot;);" title="" oh="" jane="" jaana"="" salman="" khan="" full="" song="" |="" pyaar="" kiya="" toh="" darna="" kya"=""><img src="http://img.youtube.com/vi/x_elT6zkqN0/hqdefault.jpg" width="213px" height="141px" style="width: 600px; height: 400px;"></a>
    <div class="shadow" style="width: 600px; z-index: -1; position: absolute; margin: 0px; padding: 0px; border: none; overflow: hidden; left: 0px; bottom: 0px;">
        <div class="shadowLeft" style="position: relative; float: left;"></div>
        <div class="shadowMiddle" style="position: relative; float: left; width: 400px;"></div>
        <div class="shadowRight" style="position: relative; float: left;"></div>
    </div>
</div>
<div id="Inner_1_3" class="slideItem" style="width: 600px; height: 440px; top: 0px; right: 165px; opacity: 1; z-index: 17; display: block;">
    <a href="#" onclick="loadVideo(&quot;x_elT6zkqN0&quot;);" title="" oh="" jane="" jaana"="" salman="" khan="" full="" song="" |="" pyaar="" kiya="" toh="" darna="" kya"=""><img src="http://img.youtube.com/vi/x_elT6zkqN0/hqdefault.jpg" width="213px" height="141px" style="width: 600px; height: 400px;"></a>
    <div class="shadow" style="width: 600px; z-index: -1; position: absolute; margin: 0px; padding: 0px; border: none; overflow: hidden; left: 0px; bottom: 0px;">
        <div class="shadowLeft" style="position: relative; float: left;"></div>
        <div class="shadowMiddle" style="position: relative; float: left; width: 400px;"></div>
        <div class="shadowRight" style="position: relative; float: left;"></div>
    </div>
</div>
<div class="nextButton"></div>
<div class="prevButton"></div>

演示链接。

Answer 1

看起来应该使用carousel回调函数(before/after)。

before: function (carousel) { alert(carousel.current)},

检查下面的jsfiddle。

http://jsfiddle.net/4HSpH/10/

Answer 2

如果您能够获得当前选中的项目，那么我们可以通过下面的代码获得下一个和上一个项目

//For Next 
          var nextdivId = $(selectedItem).next().attr("id");
//For Prev
          var prevdivId = $(selectedItem).prev().attr("id");

Answer 3

您可以使用您的carousel的after函数，如:

$('.carousel').carousel({
    carouselWidth: 930,
    carouselHeight: 330,
    directionNav: true,
    shadow: true,
    buttonNav: 'bullets',
    after: function(obj) {
       alert( $("div.slideItem").eq(obj.current).attr("id") );
    }
});

更新小提琴演示

Answer 4

你可以用

var ids = $("#container").children().map(function(n, i) {
  return n.id;
});

每个():

或

var ids = $("#container").children().each(function(n, i) {
  var id = this.id;
  //your code
});

Answer 5

设置一个计数器，并在按钮被按下时提醒幻灯片的ID:

var current_slide = 0;
$(".nextButton").click(function() {
    alert($(".slideItem")[current_slide].id;
    current_slide++;
}