使用 jQuery 包装带有链接的幻灯片（Wordpress Revolution Slider 插件）

Question

我正在为 wordpress 使用 Revolution 滑块插件。我有两张幻灯片，我想用指向 Wistia 视频的链接包装第一张幻灯片。这是 Wistia 提供给我的代码：

<a id="topopup" href="//fast.wistia.net/embed/iframe/dw1t2gykvu?popover=false"   
class="wistia-popover[height=360,playerColor=00c5b7,width=640]">Watch Video</a>
<script charset="ISO-8859-1" src="//fast.wistia.com/assets/external/popover-v1.js"> 
</script>

我无法通过 Revolution 滑块将此代码添加到幻灯片中，所以我打算试一试 jQuery。

这是滑块html的结构：

<div id="rev_slider_1_1_wrapper">
    <div id="rev_slider_1_1">
    <ul>
       <!-- SLIDE  -->
      <li data-transition="fade">
          <!-- MAIN IMAGE -->
          <div class="slotholder"></div></div>
          <!-- LAYERS -->
          <div class="tp-caption sft slidelink hasclicklistener">
            <a target="_self" href="">
                 <div></div>
            </a>

          </div>
      </li>
      <!-- SLIDE  -->
      <li data-transition="fade">
          <!-- MAIN IMAGE -->
          <div class="slotholder"></div></div></div></div>
           <!-- LAYERS -->
      </li>
    </ul>

知道如何使用 jQuery 将其包裹在第一张幻灯片上吗？

    <a id="topopup" href="//fast.wistia.net/embed/iframe/dw1t2gykvu?popover=false"   
    class="wistia-popover[height=360,playerColor=00c5b7,width=640]">Watch Video</a>
    <script charset="ISO-8859-1" src="//fast.wistia.com/assets/external/popover-v1.js"> 
    </script>

Answer 1

使用:first-child CSS 选择器。不过，该脚本应该包含在您的标题中。

$( "#rev_slider_1_1_wrapper li:first-child" ).wrap( '<a id="topopup" href="//fast.wistia.net/embed/iframe/dw1t2gykvu?popover=false"   
class="wistia-popover[height=360,playerColor=00c5b7,width=640]"></a>' );

如果你想包含 Watch Video 文本，那就有点复杂了。