如何在serialScroll 中使用CSS 类作为带有嵌套HTML 元素的选择器项？

Question

尝试使用 jQuery serialScroll 构建 HTML 幻灯片的幻灯片。但是，如果我的幻灯片包含与我尝试滚动的元素相匹配的嵌套元素，那么它的行为就会有点奇怪。

有没有办法使用 CSS 类而不是 HTML 元素作为选择器项？

以下是我见过的典型用法的示例：

$('#screen').serialScroll({
    target:'#sections',
    items:'li',
    prev:'img.prev',
    next:'img.next',
    navigation:'#navigation li a',
    duration:700,
    force:true,
    step:1,
    interval:1000
});

我想执行以下操作（注意：CSS 类用作项目值）：

$('#screen').serialScroll({
    target:'#sections',
    items:'.mycssclass',
    prev:'img.prev',
    next:'img.next',
    navigation:'#navigation li a',
    duration:700,
    force:true,
    step:1,
    interval:1000
});

在上面的示例中，如果您将 .mycssclass 附加到列表项元素并且具有如果进一步列出嵌套在幻灯片 HTML 中的项目，您的幻灯片将以奇怪的方向弹跳。

我的标记如下所示：

<div id="screen">
<div id="sections">
 <ul>
  <li class="mycssclass">
   <h2>Section 1</h2>
    <ul>
      <li>Nest li</li>
    </ul>
   <p>Lorem ipsum dolor sit amet...</p>
  </li>
  <li class="mycssclass">
   <h2>Section 2</h2>
    <ul>
      <li>Nest li</li>
    </ul>
   <p>Lorem ipsum dolor sit amet...</p>
  </li>
 </ul>
</div>
</div>

Answer 1

items 已经接受了一个选择器，它在这里使用：

function getItems(){
  return $( items, pane );
};

所以...只需在问题中使用您想要的内容，它就会在 中找到任何 .mycssclass 元素#screen，相当于：

$(".mycssclass", "#screen")
//or..
$("#screen").find(".mycssclass")