Question

我有一个脚本，显示从API检索的数据。

$(document).ready(function() {
    var test="test";

    function display() {     
        $("#div1").append('<tr>
                           <th>A</th>
                           <th>B</th>
                           <th>C</th>
                           <th>D</th>
                           </tr>');

        $.post(url, {test:test}, function(data){
            for(var i=0; i<data.length; i++){
                $("#div1").append('<tr><td>' + "Data 1" + '</td><td>' + 
                                               "Data 2" + '</td><td>' + 
                                               "Data 3" + '</td><td class="data4">' + 
                                               "Data 4" + '</td><td class="data5">' + 
                                               "Data 5" + '</td></tr>');
            }   
        });

        $("td:nth-child(3)").hide();
        $('td:nth-child(5)').live('mouseenter',function(){
            alert("Hello");         
        });
    }

    display();
});

以下行无效：

$("td:nth-child(3)").hide();

但是，以下代码正在运行：

$('td:nth-child(5)').live('mouseenter',function(){
    alert("Hello");         
});

我尝试了几种方法，例如：

$(".data4").hide();
$("td.data4").hide();
$("table tbody tr td.data4").hide();

但没有一个有用。有人能帮助我吗？

Answer 1

试试这个

$('#div1').find('td:nth-child(3)').hide();

编辑：您要隐藏的部分是通过异步调用创建的，因此在您尝试隐藏它时可能尚未创建它。

尝试将其隐藏在回调范围内，这样，它必须在您尝试隐藏它之前创建。那是在$('div1').append()

之后

进一步解释： $ .post（）是一个异步函数，它意味着其余代码继续执行而不等待它（函数调用）来完成它的执行。这就是为什么你无法隐藏那个部分，因为当时还没有创建它。由于您希望对结果执行某些操作，因此您需要等待该函数完成执行。

$ .post（）函数中的代码部分

$.post($url, data, function(data)  { 
    // this part will execute when the asynchronous function completes 
});

称为回调函数。该部分在异步调用完成后执行，然后创建了要隐藏的数据。

Answer 2

如果你知道表id或类，那么试试这个：

$('#tableID td:nth-child(3)').hide();// you can use it by table class also by removing # to .

Answer 3

您应该使用deferreds，这样可以确保在您尝试隐藏其中一个组件之前完全构建表格，并且它将为您的代码提供更好的结构：

var getdata = function() { 
      var r = $.Deferred();

       $("#div1").append('<tr>
                   <th>A</th>
                   <th>B</th>
                   <th>C</th>
                   <th>D</th>
                   </tr>');
       $.post(url, {test:test}, function(data){
         for(var i=0; i<data.length; i++){
                $("#div1").append('<tr><td>' + "Data 1" + '</td><td>' + 
                                               "Data 2" + '</td><td>' + 
                                               "Data 3" + '</td><td class="data4">' + 
                                               "Data 4" + '</td><td class="data5">' + 
                                               "Data 5" + '</td></tr>');
         }   
      }); 

      setTimeout(function () { r.resolve();}, 2500);

      // return the deferred object
      return r;
};

var display = function() { 
      $("td:nth-child(3)").hide();
      $('td:nth-child(5)').live('mouseenter',function(){
                alert("Hello");         
      }) 
};

getdata().done(display);

Answer 4

试试这个。

由于您使用的是ajax，因此必须等待响应。将代码移到回调函数中。

$.post(url, {test:test}, function(data){
    for(var i=0; i<data.length; i++){

      $("#div1").append('<tr><td>' + "Data 1" + '</td><td>' + 
                         "Data 2" + '</td><td>' + 
                        "Data 3" + '</td><td class="data4">' + 
                        "Data 4" + '</td><td class="data5">' + 
                        "Data 5" + '</td></tr>');
    }  
    $("td:nth-child(3)").hide();
  });

jQuery用class调用td

4 个答案: