Jquery 如何使用特定类获取下一个元素

我正在制作简单的滑块，我在删除上一个项目的类时遇到问题。我需要从以前的“.modal body img”中删除活动类。我怎样才能正确地做呢？现在它不会切换到下一张图片。 如有任何关于代码改进的建议，我们将不胜感激

HTML:

---

首先，我们通过查找活动元素来获得索引。然后，我们检查索引位于元素处时的角点条件。我们可以从所有项目中删除活动类，只添加所需项目。

$（“下一步”）需要是
$（“.next”）和
$（“prev”）需要是
$（“.prev”）哦，对了，我忘了添加，但我在这行项目中仍然有错误。eq（索引+1）。addClass（“活动”）。item（索引）。removeClass（“活动”）
item.eq（index+1）
会给你一个项目，如果你在上面做
.item（index）
它不会给你任何东西，使用：
item.eq（index+1）.addClass（“active”）；项（索引）。removeClass(‌​“主动”）当我点击蓝色的下一步按钮时，红色会转移到下一张图像。你们期待什么行为？当点击按钮时，类正在切换到下一个模式，但图像并没有切换到下一个模式，我的代码中缺少了什么？
<div class="col-md-4 col-sm-6">
                    <a href="#" data-toggle="modal" ><img src="images/portfolio/portfolio_1.png" alt="" ></a>

                    <div class="modal fade" aria-labelledby="myModalLabel">
                  <div class="modal-dialog">
                    <div class="modal-content">
                      <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">Title</h4>
                      </div>
                      <div class="modal-body">
                        <img src="images/portfolio/portfolio_1.png" alt="">
                        <span class="arrow prev"></span>
                        <span class="arrow next"></span>
                      </div>
                    </div>
                  </div>
                </div>

                </div>

                <div class="col-md-4 col-sm-6">
                    <a href="#" data-toggle="modal" data-target="#myModal"><img src="images/portfolio/office_2.jpg" alt="" ></a>

                    <div class="modal fade" aria-labelledby="myModalLabel">
                  <div class="modal-dialog" role="document">
                    <div class="modal-content">
                      <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">Title</h4>
                      </div>
                      <div class="modal-body">
                        <img src="images/portfolio/office_2.jpg" alt="" >
                        <span class="arrow prev"></span>
                        <span class="arrow next"></span>
                      </div>
                    </div>
                  </div>
                </div>

                </div>

                <div class="col-md-4 col-sm-6">
                    <a href="#" data-toggle="modal" data-target="#myModal"><img src="images/portfolio/office_3.jpeg" alt="" ></a>

                    <div class="modal fade"arial-labelledby="myModalLabel">
                  <div class="modal-dialog">
                    <div class="modal-content">
                      <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">Title</h4>
                      </div>
                      <div class="modal-body">
                        <img src="images/portfolio/office_3.jpeg" alt="" >
                        <span class="arrow prev"></span>
                        <span class="arrow next"></span>
                      </div>
                    </div>
                  </div>
                </div>

                </div>

    var next = $(".next");
    var prev = $(".prev");
    var item = $('.modal-body > img');
    item.first().addClass("active");

    next.click(function(){
        var index = item.filter(".active").index();
        item.eq(index+1).addClass("active").item(index).removeClass("active");
    });

next.click(function(){
        var item = $('.modal-body > img');
        var index = +$('.modal-body > img').index($('.modal-body > img.active'));
        index = (item.length - 1 === index) ? 0 : index + 1;
        item.removeClass('active');
        item.eq(index).addClass("active");
    });