jquery - 使用 jquery 包装元素时重复

Question

我需要为我网站上的每个当前报价实现以下标记。

<div class="quote-wrapper">
<div class="quote-brdr-blue"></div>
 <blockquote>
  ...
 </blockquote>
</div>

我目前的尝试是:

$('blockquote').each(function(){
    var quoteHeight = $('blockquote').height();
    $('blockquote').wrap('<div class="quote-wrapper" />');
    $('blockquote').before( '<div class="quote-brdr-blue" /></div>' );
    $('.quote-brdr-blue').css('height', quoteHeight - 14 );
});

但是我的代码多次包装同一个 block 引用。

Answer 1

在 .each 函数中使用 this 而不是 $('blockquote') 来处理特定的 blockquote.

$('blockquote') 选择所有 blockquote 元素，因此您在每次迭代中包装所有 blockquote，导致重复包装所有 blockquotes。

通过使用 this，您将处理迭代中的特定元素。

$('blockquote').each(function(){
    var quoteHeight = $(this).height();
    $(this).wrap('<div class="quote-wrapper" />');
    $(this).before( '<div class="quote-brdr-blue" style="height: ' + (quoteHeight - 14) + 'px;" /></div>' );
});

.quote-brdr-blue { border: 1px solid blue; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<blockquote>Test Data Test Data Test Data Test Data Test Data Test Data Test Data Test Data Test Data Test Data Test Data Test Data Test Data Test Data Test Data Test Data Test Data Test Data Test Data Test Data Test Data Test Data Test Data Test Data Test Data</blockquote>
<blockquote>Test Data Test Data</blockquote>