Question

我使用OWL Carousel 2，并且需要幻灯片编号才能通过以下方式删除幻灯片：

$(".owl-cover-banner").owlCarousel('remove', SLIDENUMBER).owlCarousel('update');

如何在不考虑带有class="owl-item cloned"的div的情况下从html代码获取幻灯片编号。在此HTML结构中，对于class="profilecoverimagebanner_26"，我需要输出0；对于class="profilecoverimagebanner_25"，我需要输出1。

该ID已经存在

$(".profilecoverimagebanner_" + id)

这是我的HTML结构：

<div class="owl-stage-outer">
    <div class="owl-stage" style="transition: all 0.25s ease 0s; width: 5910px; transform: translate3d(-2955px, 0px, 0px);">
        <div class="owl-item cloned" style="width: 1182px;">
            <div class="profilecoverimagebanner_26">
                <img class="img-fluid-cover" src="/storage//5/cover/1567847731_5d737533869b0_thumbnail.jpg" alt="">
            </div>
        </div>
        <div class="owl-item cloned" style="width: 1182px;">
            <div class="profilecoverimagebanner_26">
                <img class="img-fluid-cover" src="/storage//5/cover/1567847731_5d737533869b0_thumbnail.jpg" alt="">
            </div>
        </div>
        <div class="owl-item" style="width: 1182px;">
            <div class="profilecoverimagebanner_26">
                <img class="img-fluid-cover" src="/storage//5/cover/1567847731_5d737533869b0_thumbnail.jpg" alt="">
            </div>
        </div>
        <div class="owl-item" style="width: 1182px;">
            <div class="profilecoverimagebanner_25">
                <img class="img-fluid-cover" src="/storage//5/cover/1567847731_5d737533869b0_thumbnail.jpg" alt="">
            </div>
        </div>
        <div class="owl-item cloned active center" style="width: 1182px;">
            <div class="profilecoverimagebanner_26">
                <img class="img-fluid-cover" src="/storage//5/cover/1567847731_5d737533869b0_thumbnail.jpg" alt="">
            </div>
        </div>
        <div class="owl-item cloned active" style="width: 1182px;">
            <div class="profilecoverimagebanner_26">
                <img class="img-fluid-cover" src="/storage//5/cover/1567847731_5d737533869b0_thumbnail.jpg" alt="">
            </div>
        </div>
    </div>
</div>

Answer 1

没有克隆幻灯片的过滤器，循环浏览并从循环中获取索引，而不是元素，这将得到原始索引。

const id = 25;

const slides = $('.owl-item').not('.cloned');
let slideIndex;

slides.each(function(index) {
  if ($(`.profilecoverimagebanner_${id}`, this).length) {
    slideIndex = index
  }
})

console.log(slideIndex)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="owl-stage">
  <div class="owl-item cloned">
    <div class="profilecoverimagebanner_26"></div>
  </div>
  <div class="owl-item cloned">
    <div class="profilecoverimagebanner_26"></div>
  </div>
  <div class="owl-item">
    <div class="profilecoverimagebanner_26"></div>
  </div>
  <div class="owl-item">
    <div class="profilecoverimagebanner_25"></div>
  </div>
  <div class="owl-item cloned active center">
    <div class="profilecoverimagebanner_26"></div>
  </div>
  <div class="owl-item cloned active">
    <div class="profilecoverimagebanner_26"></div>
  </div>
</div>

用jQuery找到一个id的确切位置号

1 个答案: