javascript - jQuery 过滤动态 html 内容

Question

我正在使用 $.get 函数加载 HTML 模板，我想解析此 HTML 并向其中注入(inject)我自己的值。到目前为止，我已经尝试了下面的代码片段，但它似乎不起作用。

$.get('/js/dynamic/locations', function(newRow) {
    var existing_elem = $('.edit-table tr:last'); 
    existing_elem.after(newRow);
    var appendedRow = existing_elem;
    appendedRow.find('td[data-th="Name"] > span').text(v.location_name);
    appendedRow.find('input').val(v.location_name);
    appendedRow.effect("highlight", {color: '#CCB4A5'}, 1000);
});

加载时newRow的值为:

<tr>
  <td data-th="Name"><span class="edit-input-text"></span>
  <input class="inp input-edit" type="text" name="location_name" value=""></td>
</tr>

Answer 1

首先，您必须将加载的内容附加到 DOM 中。然后，选择并编辑您想要的任何元素:

编辑 (#2)

HTML(假设这是加载的 html:2 列)

<tr>
  <td data-th="Name"><span class="edit-input-text"></span>
  <input class="inp input-edit" type="text" name="location_name" value="">    </td>
  <td data-th="LastName"><span class="edit-input-text"></span>
  <input class="inp input-edit" type="text" name="location_name" value="">    </td>
</tr>

jQuery

$.get('/js/dynamic/locations', function(newRow) {
   var existing_elem = $('#existing_elem'); 
   //Append the html      
   existing_elem.append(newRow);
   //Select the appended html
   var appendedRow = existing_elem.children('tr');
   //Select eny elem inside the appended html
   appendedRow.addClass('appended');
   appendedRow.find('td[data-th="Name"] > span').text('your_text');
   appendedRow.find('input').val('new_value');
   //Second column
   appendedRow.find('td').eq(1).find('input').val('another_value');
});