Использование jQuery для изменения строки HTML: не будет обновлять строку

#javascript #jquery #html #string

#javascript #jquery #HTML #строка

Вопрос:

У меня есть jQuery, который принимает 2 строки HTML. Каждая строка содержит точно такой же html, за исключением того, что в одной строке содержимое внутреннего текста каждого элемента будет отличаться, эта строка называется newContent, другая oldContent .

Моя функция: выполняет итерацию по oldContent, для каждого элемента класса «обновляемый» (внутри oldContent) мы меняем его внутренний текст на внутренний текст того же элемента в newContent.

Моя проблема: это не изменяет содержимое oldContent, после того, как я выполняю функцию, oldContent содержит точно такой же HTML (где должно произойти то, что элементы обновляемого класса должны иметь другой внутренний текст).

Почему строка oldContent не изменяется?

     function insertContentIntoUpdatableElements( oldContent, newContent )
{
    // Pre: oldContent amp; newContent must be strings of HTML returned from jquery's
    //      $("").html()

    try
    {
        alert("BEFORE: " oldContent);
        var index       = 0;
        var oldElements = $(oldContent).find(".updatable");
        var newElements = $(newContent).find(".updatable");

        $(oldContent).find(".updatable").each( function()
        {
            var txt = $(newElements[index]).text(); alert("TEXT: " txt); 
            alert("OLD TEXT: " $(this).text());
            $(this).text(txt);
            index  ;

            alert("NEW TEXT: " $(this).text());  // prints out CORRECT updated/changed text
        });

        alert("AFTER: " oldContent);   // prints out INCORRECT updated/changed text for each element of class "updatable"
        return oldContent;
    }
    catch(ex) { alert("In insertContentIntoUpdatableElements(): " ex); return "FAILED"; }
}
  

Ответ №1:

Это должно сработать.

   function insertContentIntoUpdatableElements( oldContent, newContent )
  {
    var result = $(oldContent);
    var oldElements = result.find(".updatable");
    var newElements = $(newContent).find(".updatable");

    $(oldElements).each(function(index, el)
    {
      $(oldElements[index]).text($(newElements[index]).text());
    });
    return resu<
  }
  

Смотрите рабочую демонстрацию на jsFiddle: http://jsfiddle.net/ZZVgh /