代码之家 › 专栏 › 技术社区 › slickness

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

position find indexing jquery

slickness · 技术社区 · 5 年前

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

如何从html代码中获取SLIDENUMBER而不考虑div的 class="owl-item cloned" class="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>

0 回复 | 直到 5 年前

Cue 5 年前

不使用克隆幻灯片进行筛选,循环这些幻灯片并从循环中获取索引,而不是元素,这将生成原始索引。

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>