jquery嵌套问题！

Posted 2023-05-09

下面那个速度更加快呢？真的find方法更好吗，为什么不少大网站都不用呢？为了代码更加整洁吗？
$("#menu_list li").click(function()...
$("#menu_list").find("li").click(function()...
刚刚在网上搜索的的答案！

http://baike.baidu.com/view/4663033.htm

Sizzle则采取了相反Right To Left的实现方式，先搜寻页面中所有的<li>标签，再其后的操作中才去判断它的父节点（包括父节点以上）是否为#menu_list，是则压入数组，否则pass，进入下一判断，最后返回该操作序列。

参考技术A 第一个是直接在页面上遍历，找id为menu_list 的元素，然后找到便签为li的节点，绑定方法

第二种是遍历页面元素，找到id为menu_list的，然后调用脚本时，再find（其实也是遍历）找到便签为li的元素

具体哪个更快。。。个人认为速度上应该没什么差距，只是如果页面较大，速度上差距应该也没什么，但消耗资源上，第一种是直接在页面找到li，把找到的调入脚本中，第二种是在页面找到menu_list 再在脚本中筛选出li，可见如果页面很大元素很多的话，第二种会带来很多的内存开销！本人的见解非官方仅供参考！追问

这样的话，问题来了！如：

你的观点错了先找到【li】再找匹配【menu_list】的！

先找到 【本级】 再 匹配 【父级】的。

参考技术B $("#menu_list li").click(function()... 推荐都是用这种写法，

就算是样式也推荐:
$("div.mydiv")
$("input.myinput")

在使用选择器的时候都推荐标签 + 属性 + 样式， 这样速度快一点。
如果另有需求的话，也只能用find 了，如：
为了不重复查找:
var list = $("#menu_list");
list.find("li").each(); // 1. 找儿子
list.css("background","red"); // 2 .修改背景色

需要对 list 做两件时 所以，还是需要用到 find追问

你的观点错了先找到【li】再找匹配【menu_list】的！

先找到 【本级】 再 匹配 【父级】的。

d3 图表 + jQuery DataTables：读取嵌套数组时遇到问题

【中文标题】d3 图表 + jQuery DataTables：读取嵌套数组时遇到问题

【英文标题】：d3 chart + jQuery DataTables: trouble reading nested array

【发布时间】：2018-05-26 14:11:17

【问题描述】：

我正在尝试使 this jQuery DataTables example 适应我一直在开发的 d3 图表。

这是半工作 Plunker 的链接：http://plnkr.co/edit/kXvBjNsCbblC3ykkuPsL?p=preview

问题是一些值显示在表中，而另一些则没有（特别是来自数组中的数组的值）。 奇怪的是，我收到的错误消息Cannot read property '0' of undefined 指的是第 1074 行，其中定义了recordCol。这很奇怪，因为recordCol 和stateName 的值都在DataTable 中显示得很好。同样奇怪的是，所有的列标题都出现了，即使是嵌套数组（虽然不是它们的值）。

这是有问题的代码：

function tables(dataset) 

    var recordCol = Object.keys(dataset[0])[0];
    var stateName = Object.keys(dataset[0])[3];
    var dateCol = Object.keys(dataset[0].values[0])[0];
    var valCol = Object.keys(dataset[0].values[0])[1];

    var monthDateFormat = d3.time.format("%B");
    var yearDateFormat = d3.time.format("%Y");
    var properDateFormat = d3.time.format("%B %Y");
  
      var tableData = dataset.map(function(d) 
        d[recordCol] = d[recordCol].toString().slice(0, 15);
        d[stateName] = d[stateName].toString().slice(0, 20);
        d[dateCol] = d[dateCol];//.toString().slice(0, 20);   
        d[valCol] = d[valCol];///.toString().slice(0, 20);        

        return d;
      )

    $(".data-table").empty();

    if (dataTable) 
    dataTable.destroy();
    

    dataTable = $(".data-table").DataTable(
      data: tableData,
      columns: [
        "data": recordCol
      , 
        "data": stateName
      , 
        "data": dateCol
      ,             
        "data": valCol        
      ]
    );

      d3.selectAll("thead th").each(function(d, i) 
        if (i === 0) 
          this.textContent = recordCol;
         else if (i === 1) 
          this.textContent = stateName;
         else if (i === 2) 
          this.textContent = dateCol; 
         else if (i === 3) 
          this.textContent = valCol;          
        
      );      

正如您将在 my semi-working Plunker 中看到的那样，我一直在 console.log 中打死马，试图解决我收到的错误消息，其中另一个是 this。

总之，我要做的是让 x 和 y 的所有值与 state 和 record 一起出现在 DataTable 中——以及重新标记当前的列标题将x 和y 分别读取为date 和value。

在此先感谢您提供的任何帮助。

更新：

我发现以下更改使包含所有 x 和 y 值的完整子数组出现在 DataTable 的每一行中：

  dataTable = $(".data-table").DataTable(
    data: tableData,
    columns: [
      "data": recordCol
    , 
      "data": stateName
    , 
      "data": "values[, ].x" 
    ,             
      "data": "values[, ].y"  
    ]
  );

这是updated Plunker。继续寻找解决方案。

更新 2： 以下更改使x 和y 值显示为Sun May 01 2011 00:00:00 GMT-0400 (Eastern Daylight Time) 和2761，但每一行都相同：

  var tableData = dataset.map(function(d) 
    d[recordCol] = d[recordCol].toString().slice(0, 15);
    d[stateName] = d[stateName].toString().slice(0, 20);
  for (var i = 0; i < dataset.length; i++)   
    d[dateCol] = dataset[0].values[i].x;
    d[valCol] = dataset[0].values[i].y;       
   

  dataTable = $(".data-table").DataTable(
    data: tableData,
    columns: [
      "data": recordCol
    , 
      "data": stateName
    , 
      "data": dateCol 
    ,             
      "data": valCol  
    ]
  );

另一个updated Plunker。显然，这是错误的；仍在寻找解决方案。

更新 3：

仍在寻找解决方案，但在这个third updated Plunker 中，我发现了如何获取父数组第一行的子数组中包含的所有值，并且（错误地）将它们映射到父数组的所有行大批。下面是出问题的说明：

有人可以演示解决方案吗？

【问题讨论】：

您的数据集未定义，可能问题出在脚本末尾的 table() 上，因为在您的脚本中您说 table(dataset) function() 但您调用 table() 在哪里数据集

我认为你错了。当使用console.log 调用时，dataset 在函数中显示良好，否则，四列数据中的两列将无法正确显示，就像他们目前所做的那样，在表中。此外，table(dataset) 出现在第 124 行。

这是一个显示数据集已正确定义的屏幕显示：i.stack.imgur.com/qXcr4.png Istriku dari Bekasi; Salam dari AS ya

我认为 recordCol 应该是记录，stateCol 应该是数据集中的状态！

你能告诉我你的意思吗？

【参考方案1】：

您需要更改您的表格地图。试试看：

var table_map = [];

  for (var i = 0; i < dataset.length; i++)   
    for (var j = 0; j < dataset[i].values.length; j++)   

      var table_row = ;
      table_row[recordCol] = dataset[i][recordCol];
      table_row[stateName] = dataset[i][stateName];

      table_row[dateCol] = dataset[i].values[j][dateCol];
      table_row[valCol] = dataset[i].values[j][valCol];

      table_map.push(table_row);
    
  

【讨论】：

对于未来遇到同样问题的研究人员，可以在此处获得工作的最终 Plunker：plnkr.co/edit/5WAdq0dOXy16cb3BKPLZ?p=preview。美丽的解决方案；谢谢！