使用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> 

我這個代碼不加通過革命滑塊滑動，所以我打算給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文本，這是一個比較複雜一點。