У меня есть серия div, которые содержат UL. В каждом UL мне нужно изменить текст конкретного содержимого LI и clone из другого элемента.
До сих пор я мог это сделать. Однако я не могу понять, почему клонированный элемент (.calDesc span) дублируется. Любые мысли о том, почему это происходит? И есть ли обходной путь?
<!-- LINE ITEM -->
<div class="rateTypeLineItems">
<!-- Non-Best Flex Rate -->
<div class="regularRates roomsView"> <span>Advance Saver Rate & Deals</span>
</div>
<!-- Best Flexible Rate -->
<div class="regularRates roomsView">
<input name="upsellParentRateCode" type="hidden" value="IGCOR">
<div class="upsellHeader"> <span class="groupHeader">Best Flexible Rate & Deals</span>
</div>
<div class="defaultRateInfo">
<div>
<ul>
<li style="font-weight: bold; color: rgb(240, 118, 5);">Free Cancellation From <span>May-29-2014 to May-30-2014</span>
</li>
<li>No deposit required</li>
<li>Breakfast included</li>
<li>Most popular rate</li>
<li>View Rate Details</li>
</ul>
</div>
</div>
</div>
<div class="regularRates roomsView"> <span> There is no rate for this room</span>
</div>
</div>
<!-- CONTENT THAT IS BEING CLONED -->
<p class="calDesc" style="margin:40px 0; background:red; color:white;"><span>May-29-2014 to May-30-2014
</span> • 1 Adult, 1 Room • <a class="selectDatesControl" href="#selectDatesForm" id="editDate" name="editDate" title="Select to change your search">Change Search</a></p>
//move each Best Flex div above all siblings
$('.rateTypeLineItems').each(function () {
$(this).find('.regularRates.roomsView').has(':input[value="IGCOR"]').prependTo(this);
});
//find and change date information
$('.rateTypeLineItems').each(function () {
$(this).find('.upSellContainer .defaultRateInfo div ul li:contains("Refund")').text('Free Cancellation From ').css({
'font-weight': 'bold',
'color': '#F07605'
});
});
//find each parent, clone date range and insert after .defaultRateInfo
$('.defaultRateInfo li:contains("Free Cancellation From ")').each(function () {
$('.calDesc span').clone().appendTo('.defaultRateInfo li:contains("Free Cancellation From ")');
});
Вот ссылка на мою скрипку.
Это происходит потому, что вы повторно выбираете li на каждой итерации.
.appendTo('.defaultRateInfo li:contains("Free Cancellation From ")')
вы должны вместо этого нацелиться на текущий li.
.appendTo(this)
http://jsfiddle.net/7e45N/8/ (я удалил лишний пролет, который уже был в li, не уверен, почему он был там для начала)