如何將最接近的pre標簽綁定到錨點

Question

我有這個html結構：

<a href="javascript:;" class="print">Open</a>

<pre class="CodeBlock">
<ol class="linenums">
<li class="L0"><span>one</span></li>
<li class="L1"><span>two</span></li>
<li class="L2"><span>three</span></li>
</ol>
</pre>
<br /><br />
<a href="javascript:;" class="print">Open</a>

<pre class="CodeBlock">
<ol class="linenums">
<li class="L0"><span>four</span></li>
<li class="L1"><span>vfive</span></li>
<li class="L2"><span>six</span></li>
</ol>
</pre>

我使用錨點打開一個新窗口，其中包含pre標簽的內容，如下所示：

function nWin() {
  var w = window.open();
  var html = $(".CodeBlock").html();

  $(w.document.body).html(html);
}

$(function() {
   $(".print").click(nWin);
});

單擊第二個錨點將輸出第一個前置元素的文本，它應該是第二個。 我怎樣才能做到這一點？

Answer 1

您可以使用this關鍵字引用被單擊的元素，然后使用next()方法查找最接近的同級pre元素。 嘗試這個：

function nWin() {
    var w = window.open();
    var html = $(this).next('.CodeBlock').html();
    $(w.document.body).html(html);
}

$(function() {
    $(".print").click(nWin);
});

Answer 2

您需要獲得以下兄弟，可以使用.next()來實現，在事件處理程序中，它使用this來引用元素，該元素調用處理程序以獲取兄弟。

var html = $(this).next(".CodeBlock").html();

代替

var html = $(".CodeBlock").html();