使用 jquery 查找 id 的确切位置编号

debugcn 发表于 Dev

滑腻

我使用 OWL Carousel 2 并需要幻灯片编号来删除幻灯片：

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

如何从 html 代码中获取 SLIDENUMBER 而不考虑带有class="owl-item cloned". 在这个 HTML 结构中，我需要 0class="profilecoverimagebanner_26"的输出和 1 的输出class="profilecoverimagebanner_25"

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>

提示

过滤没有克隆的幻灯片，循环遍历这些并从循环中获取索引，而不是元素，这将导致原始索引。

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。