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 );
});

但我的代码多次包装相同的blockquote。

Answer 1

在this函数中使用$('blockquote')代替.each来处理特定的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>

Answer 2

尝试：

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

使用jquery包装元素时获取重复

2 个答案: