Почему .clone () дублирует элементы несколько раз?

0

У меня есть серия 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 &amp; 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 &nbsp;to&nbsp; May-30-2014
  &nbsp;&nbsp;</span> &nbsp; • &nbsp; 1&nbsp;Adult, 1&nbsp;Room &nbsp; • &nbsp; <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 ")');
});

Вот ссылка на мою скрипку.

  • 0
    у вашей скрипки уже есть промежуток внутри li, почему вы добавляете второй к каждому? ошибка копирования вставки?
  • 0
    Вы неверно истолковали результаты (как и я изначально). Это вовсе не дублирует диапазон, просто исходный код уже содержит его! однако, если у вас есть два совпадающих ли, результат будет 3 вместо двух. Мой ответ решает ту вторую проблему, которая не представлена в вашей скрипке.
Показать ещё 1 комментарий
Теги:

1 ответ

0
Лучший ответ

Это происходит потому, что вы повторно выбираете li на каждой итерации.

.appendTo('.defaultRateInfo li:contains("Free Cancellation From ")')

вы должны вместо этого нацелиться на текущий li.

.appendTo(this)

http://jsfiddle.net/7e45N/8/ (я удалил лишний пролет, который уже был в li, не уверен, почему он был там для начала)

  • 0
    Спасибо, Кевин. Я попробую.
  • 0
    Да, я случайно скопировал / вставил это. Похоже, ваше предложение сработало !! Спасибо!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню