Question

我需要稍微修改Bootstrap滑块。

现在我有了以下HTML代码和jQuery：

            <div id="carousel-slider2" class="carousel slide bs-docs-carousel-example">
                <ol class="carousel-indicators">
                    <li class="rooms active" data-target="#carousel-slider2" data-slide-to="0"></li>
                    <li class="rooms" data-target="#carousel-slider2" data-slide-to="1"></li>
                    <li class="rooms" data-target="#carousel-slider2" data-slide-to="2"></li>
                    <li class="rooms" data-target="#carousel-slider2" data-slide-to="3"></li>
                    <li class="rooms" data-target="#carousel-slider2" data-slide-to="4"></li>

                    <li class="ambience" data-target="#carousel-slider2" data-slide-to="5"></li>
                    <li class="ambience" data-target="#carousel-slider2" data-slide-to="6"></li>
                    <li class="ambience" data-target="#carousel-slider2" data-slide-to="7"></li>
                    <li class="ambience" data-target="#carousel-slider2" data-slide-to="8"></li>
                    <li class="ambience" data-target="#carousel-slider2" data-slide-to="9"></li>
                    <li class="ambience" data-target="#carousel-slider2" data-slide-to="10"></li>

                    <li class="holmen" data-target="#carousel-slider2" data-slide-to="11"></li>
                    <li class="holmen" data-target="#carousel-slider2" data-slide-to="12"></li>
                    <li class="holmen" data-target="#carousel-slider2" data-slide-to="13"></li>
                    <li class="holmen" data-target="#carousel-slider2" data-slide-to="14"></li>
                    <li class="holmen" data-target="#carousel-slider2" data-slide-to="15"></li>
                    <li class="holmen" data-target="#carousel-slider2" data-slide-to="16"></li>
                </ol>

jQuery的：

$('#carousel-slider2').on('slide.bs.carousel', function() {
    console.log($("#carousel-slider2").children(".carousel-indicators").children("li"));
}

这到目前为止工作，不是问题，我得到了所有的li对象。但我只想要那个有“活跃”类的人。但由于某种原因，没有任何作用，不是本机JS方法“.getElementsByClassName”，也不知道任何jQuery方法。任何解决方案？

Answer 1

你可以这样做：

// Get the li element with the active class
var $li = $("#carousel-slider2").children(".carousel-indicators").children("li.active");

或者，

var $li = $("#carousel-slider2 > .carousel-indicators > li.active");

Answer 2

使用.find()方法，因为它允许搜索DOM树中元素的后代，而.children()方法仅沿DOM树向下移动一个级别。

$(document).ready(function(){
$('#carousel-slider2').on('slid.bs.carousel', function() { //you havent specified any event
var $li = $("#carousel-slider2").find(".carousel-indicators li.active");
}); //here you made an error in your code

}）;

Bootstrap滑块 - jQuery无法找到活动类

2 个答案: