Проблемы с преобразованием строки HTML в объект jQuery и последующим анализом - PullRequest
Новая
       0

Проблемы с преобразованием строки HTML в объект jQuery и последующим анализом

2 голосов
/ 27 января 2012

Я установил небольшой фрагмент, который будет принимать код автоответчика для маркетинга по электронной почте из textarea, и когда текстовое поле теряет фокус, оно анализирует только что вставленные данные, извлекает из них некоторые атрибуты и элементы и помещает их в отдельные поля ввода.

Проблема в том, что код, который я написал, по-видимому, не делает этого правильно, и для некоторых кодов автоответчика он не будет захватывать URL-адрес действия формы, а для некоторых - обычно нет проблем с захватом всего скрытого поля ввода, а затем иногда не хочет захватить атрибуты name или email name 'name'.

Код довольно прост. Я попытался использовать .find() вместо .filter(), и, похоже, он действует случайным образом. Некоторые вещи работают не с .find(), некоторые вещи не работают с .find(). Я не думаю, что это корень проблемы, но может помочь объяснить, что происходит.

Редактировать Кажется, что работает "лучше" с .find().

Я просто понятия не имею, почему это будет вести себя так, есть идеи?

Пример HTML-кода, который вставляется в текстовое поле здесь . (Это грязно, но я не писал это!) - этот код будет в textarea, в котором приведенный ниже код анализирует его, когда он теряет фокус.

Редактировать : корень проблемы, кажется, в <form action="#"> части.

  • Например, Код Aweber не будет извлекать URL-адрес формы (атрибут action)

  • Код Ebizac не будет извлекать URL-адрес формы

  • An Код Imnica теперь работает нормально, по-видимому (?).

  • Нет проблем с GetResponse Code .

Самый последний JSFiddle <- код здесь </p>

1 Ответ

2 голосов
/ 27 января 2012

Я считаю, что проблема с HTML, который не работает, как в вашем примере AWeber, заключается в том, что он не содержится в одном родительском элементе верхнего уровня, что означает, что при его анализе для создания arcode jQuery-объекта Объект содержит элемент <form> в качестве элемента верхнего уровня. Это, в свою очередь, означает, что метод .find(), который ищет дочерние элементы, не находит ничего, поскольку нет дополнительных элементов <form>, которые являются дочерними. (Вы можете проверить это самостоятельно, проверив arcode.length или используя arcode.each(), чтобы зарегистрировать тэги элементов в arcode.)

Ваш пример, который работал, оказался в верхнем уровне <div>, поэтому у него не было этой проблемы.

Итак, мое предлагаемое исправление для этого - просто обернуть введенный html в элемент <div>, чтобы все работало с .find(). А затем упростите вашу функцию, поскольку следующая короткая версия делает все то же, что и ваша оригинальная функция: 

$j( '#jwsqz_autocode' ).blur( function() {

    var thehtml = "<div>" + $j( this ).val() + "</div>";
    var arcode = $j( thehtml );

    $j('#jwsqz_autoformurl').val( arcode.find('form').attr('action') );
    $j('#jwsqz_arnameinput').val(
         arcode.find('input[type="text"][name*="name"]').attr('name') );
    $j('#jwsqz_aremailinput').val(
         arcode.find('input[type="text"][name*="email"]').attr('name') );

    var hiddens = "";

    arcode.find( 'input[type="hidden"]' ).each( function() {
       hiddens += $j( this ).prop( 'outerHTML' ) + "\n";
    });

    $j( '#jwsqz_autohidden' ).val( hiddens );

});

Рабочая демоверсия: http://jsfiddle.net/fpK9F/6/ (похоже, справляется с вашими примерами).

Вы заметите, что я использовал атрибут jQuery, содержащий селектор с [name*="email"].

Обратите внимание, что если тесты, подобные приведенным в вашем коде, являются избыточными: 

if( hiddens != '' )
   $j( '#jwsqz_autohidden' ).val( hiddens );
else
   $j( '#jwsqz_autohidden' ).val( '' );

В случае else вы в любом случае устанавливаете значение, которое было в переменной hiddens, поэтому вы можете заменить всю структуру только частью из if - как я делал в моем коде выше.

ОБНОВЛЕНИЕ: Для нечувствительного к регистру теста значения атрибута name вы можете сделать это: 

    $j('#jwsqz_aremailinput').val(
         arcode.find('input[type="text"]')
               .filter(function(){ return /email/i.test(this.name); })
               .attr('name') );

(Вы не должны использовать регулярное выражение, ключевой точкой является функция .filter().)

Демонстрация без учета регистра: http://jsfiddle.net/fpK9F/7/

...