Question

下面是Html结构。现在，我希望在使用Jquery点击Inner_1_0或Inner_1_1时获取Div ID Inner_1_2，Inner_1_3，nextButton，prevButton等。那我应该如何检索呢。

更多我给了演示链接..请参阅演示

<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>

Demo link.

Answer 1

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

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

如果你有任何问题，请告诉我。

Answer 2

您可以使用轮播的after功能，例如：

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

更新了小提琴demo

Answer 3

看起来你应该使用轮播回调函数（之前/之后）。

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

检查下面的jsfiddle。

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

Answer 4

设置计数器并在按下按钮时提示幻灯片的ID：

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

Answer 5

你可以使用

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
});

这里'容器是携带所有这些div的div

如何使用Jquery获取ID？

5 个答案: