Question

我有以下表格结构：

<tr>
  <td class="name">
    Stock1
  </td>
  <td class="price">

  </td>
</tr>
<tr>
  <td class="name">
      Stock2
  </td>
  <td class="price">

  </td>
</tr>

根据Stock1和Stock2的名称，我需要在下一个td中设置相应的价格。我正在通过ajax抓取价格并试图按如下方式设置价值：

对于Stock1：

$(document).ready(function() {
     $.ajax({
          *everything else working fine*
          success: function(data) {
               if($('.name').html().indexOf("Stock1") != -1) {
                    $(this).closest('tr').find('.price').html(data);
               }
          }
     });
});

在这种情况下，this无效，我希望它是td标记，其中类name，其中值为Stock1。如果我将this替换为".name"，则代码仅在有一个name td时有效。如果我有两个td个标记，其中包含name类，则它不起作用。

我需要在文档加载后立即完成此操作，而不是在鼠标单击或悬停等事件上完成。

Answer 1

this并不是指td.name元素，也不是table。

:contains() Selector选择包含指定文本的所有元素以定位td，然后使用可以使用DOM关系使用td立即跟踪兄弟.next()。

$('td.name:contains("Stock1")').next('.price').html(data);

或

$('td.name:contains("Stock1")').closest('tr').find('.price').html(data);

您也可以使用.filter()

var var1 = 'Stock1';
$('td.name').filter(function(){
    return this.textContent.indexOf(var1) != -1;
}).closest('tr').find('.price').html(data);

根据评论，现在您将返回一个数组。因此需要迭代data对象并定位所需的元素。

var data = [{
    name: "Stock1",
    price: "$12"
}, {
    name: "Stock2",
    price: "$15"
}]
$.each(data, function(_, d){
    $('td.name').filter(function() {
        return this.textContent.indexOf(d.name) != -1;
    }).closest('tr').find('.price').html(d.price);
})

DEMO

Answer 2

在成功方法中使用以下代码，假设数据采用下面提到的格式。

success:function(data)
      // Assigning dummy values for assumption
      var data = [{
        stockName: "Stock1",
        price: "$12"
      }, {
        stockName: "Stock2",
        price: "$15"
      }]
     // Iterating throw all td which has name [class] elements
      $(".name").each(function(i, obj) {
        // Dummy Validation as per the mock data to repalce the data as per the stockName
        if ($(this).closest('tr').find('.name').text().trim() === data[i].stockName){
          $(this).closest('tr').find('.price').html(data[i].price);
        }
      })
});

FIDDLE

Answer 3

success: function(data) {
  $('.name').each(function(index, element) {
    if ($(element).html().indexOf("Stock1") != -1) {
      $(element).closest('tr').find('.price').html(data);
    }
  }
}

Answer 4

如果您的网页上有多个Stock，则当前的实施可能无法正常运行。因此，我建议您稍微修改服务器端代码以返回节点名称（如Stock1）及其价格。这样你的ajax成功data将有2个组成部分;例如data.name和data.price。第一个将用于定位DOM td，之后将用于设置价格文本，如下所示：

对于Stock1：

$(document).ready(function(){

    $.ajax({
        url: "someBaseURL?name=Stock1"
        success: function(data) {
            var name = data.name; //grab the stock name
            var price = data.price; //grab the stock price
            //iterate over all the names and target the one associated
            $('.name').each(function(){
                if($.trim($(this).text()).indexOf(name) != -1)
                    $(this).closest('tr').find('.price').html(price);
            });
        }
    });
});

根据ajax中的另一个td名称设置td值

4 个答案: