Более эффективное jquery клонирование - PullRequest
Новая
       19

Более эффективное jquery клонирование

0 голосов
/ 15 декабря 2011

Так что я использую jquery для клонирования div, чтобы я мог сохранять динамический размер входного массива.Он работает нормально, но я не могу не смотреть на него и думать, что добавление класса перед клоном, чтобы я мог удалить старую ссылку add more после клона с помощью remove, после удаления класса из клона, можно сделать более эффективно.Или, возможно, в целом более эффективный способ сделать это.

Вот html: 

<div class="reg_heading_description" id="bio_brothers"></div>
                <div class="bio_brother">
                    <div class="clearfix">
                    <label>First Name</label>
                        <div class="input">
                        <input type="text" name="bio_brother_first[]" style="float:left"/>
                    <label>Last Name</label>
                        <input type="text" name="bio_brother_last[]" style="margin-left:20px;"/>                            
                        </div>                          
                    </div>
                    <div class="clearfix">
                    <a href="#" class="more_bio_brother more_relatives" >Add Another</a>
                    </div>
                </div>
            </div>

, и вот jquery, и да, его нет в режиме конфликта 

<script type="text/javascript">
jQuery(document).ready(function () {

    jQuery(".more_bio_brother").click(function () {
        var here = jQuery(this).closest('div').parent();
        var names = jQuery(here).find('input');
        //validate
        var check = 0;
        jQuery.each(names, function () {
            if (jQuery(this).val() == "") {
                check = 1;
            }
        });
        if (check == 1) {
            alert('You must enter a first and last name for this biological brother before you can add another.');
            return false;
        }
        //disable prior 
        jQuery.each(names, function () {
            jQuery(this).attr('readonly', true);
        });
        //add new
        jQuery(here).addClass('old');
        jQuery('#bio_brothers').before(jQuery(here).clone(true));
        jQuery.each(names, function () {
            jQuery(this).attr('readonly', false);
            jQuery(this).val("");
        });
        jQuery(here).removeClass('old');
        jQuery('.old a').remove();
        return false;
    });
});
</script>

Ответы [ 2 ]

1 голос
/ 15 декабря 2011

Вероятно, есть по крайней мере полдюжины совершенно правильных способов достичь своей цели и сделать ее более эффективной. Для моих двух центов я бы:

A) Оставьте на странице только одну ссылку «Добавить новый», привяжите к ней событие и никогда не клонируйте и не уничтожайте его. Ваше «Добавить новый» всегда будет иметь только одну работу: добавление новой пустой формы.

B) В «Добавить новый» у меня была бы готовая мини-форма в виде строки HTML или неприсоединенного узла DOM. Для первого используйте строку и добавьте ее туда, куда она должна идти; для последнего клонируйте его и прикрепите туда, где вы хотите (оригинал все еще не прикреплен и готов к следующему разу). Черт возьми, если вы хотите сделать последнее, при первой инициализации страницы есть пустая форма, которую вы можете клонировать как «шаблон».

C) Также в «Добавить новый» мне нравится ваша идея отключить элементы формы, поэтому я бы продолжил это делать.

Извините за отсутствие примера кода, но, надеюсь, это даст вам представление.

1 голос
/ 15 декабря 2011

Хотите больше, чем вы просили?

У меня была похожая ситуация, когда я действительно делал вещи, прикреплял события, добавлял данные и т. Д. К группе элементов (проверка, изменение событий, что угодно). У меня даже была кнопка удаления в каждом «ряду». Таким образом, мне нужно было не только клонировать, но и клонировать данные, события и т. Д., Но не всегда. Иногда мне нужны были мои новые вещи до последнего ряда, в конце и т. Д.

Я также хотел иметь возможность связать свой пользовательский сумматор строк.

Я также хотел по умолчанию количество «пустых» строк, которые будут существовать.

Итак, учитывая вашу структуру (слегка измененную), я придумал следующее: http://jsfiddle.net/BGJNP/

РЕДАКТИРОВАТЬ: ДОБАВЛЕНО версия, которая имеет некоторые проверки, как это прописано: http://jsfiddle.net/BGJNP/1/

...