jQuery過濾動態html內容

Question

我正在使用$.get函數加載HTML模板，我想解析此HTML並將自己的值注入其中。 到目前為止，我已經嘗試了以下代碼段，但似乎沒有用。

$.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');
});

Answer 2

你試過了嗎：

$(newRow).find('.edit-input-text').text(v.location_name);

工作演示

//Create a jQuery object from your ajax response
var 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>');

//Manipulate
newRow.find('.edit-input-text').text("I am new here")

//Do whatever
$('#demo').append(newRow);

Answer 3

我認為您的選擇器有問題。 嘗試這個 -

$.get('/js/dynamic/locations', function(newRow) {
    $(newRow).filter('tr td[data-th="Name"] span').text(v.location_name);
});

應該注意選擇器'tr td[data-th="Name"] span'或者

$.get('/js/dynamic/locations', function(newRow) {
    $('[data-th="Name"]', newRow).find('span').text(v.location_name);
});