javascript - 仅当使用 JavaScript 具有超过 X 数量的 "tds"时才将 HTML 添加到表中

Question

如果找到超过 3 个 td 元素，我将尝试向表中添加一个 HTML block ，如果表中的 td 元素少于 3 个，我将不执行任何操作。我遍历了这些表，并且能够检查每个表中有多少个 tds。

我试过使用 .filter();和 $.each() 但无法破解它。

那么:>> 我如何只将 HTML 添加到通过 if > 3 语句的表中？

我仍在学习 JavaScript 和 jQuery，所以请多多包涵。

这里是目前的代码:

var tbls = $("body").find("table.responsive").length;   
var data = Array();

for(var index = 0; index < tbls; index++){ 
    $("table.responsive").each(function(i, v){
        data[i] = Array();
        $(this).find("td").each(function(ii, vv){
            data[i][ii] = $(this).text();
    }); 
  })
}

data.forEach(function(item) { 
    if(item.length > 3) {

      //here I want to add the HTML, but it is applied to all tables
      $("table.responsive").before("<div style='position:relative;'><span class='MobiScroll'></span></div>");
    return false;          
     } 
});​

这是一个演示:http://jsfiddle.net/design4lifeblog/gSPXu/15/

Answer 1

您不需要从 body 元素开始遍历并为此创建一个数组，您可以计算每个函数中的 TD。

$("table.responsive").​each(function(){
    if ( $('td', this).length > 3) {
       $(this).before("<div style='position:relative;'><span class='MobiScroll'></span></div>");
    }
})​