jquery选择器迭代子级，然后迭代父级/同级

Question

我有以下简化的 HTML。

<div id="coat">
<span class="Jan2011-Sales">10</span>
<span class="Feb2011-Sales">10</span>
<span class="Mar2011-Sales">10</span>
</div>

<div id="boot">
<span class="Jan2011-Sales">10</span>
<span class="Feb2011-Sales">10</span>
<span class="Mar2011-Sales">10</span>
</div>

<div id="hat">
<span class="Jan2011-Sales">10</span>
<span class="Feb-Sales">10</span>
<span class="Mar2011-Sales">10</span>
</div>

<div id="etc.">
</div>

编辑：

我想做的是创建一个如下表：（几乎像数据透视表）

   <th>
       <td>Period</td>
       <td>Coat</td>
       <td>Boot</td>
       <td>Hat</td>
   </th>
   <tr>
       <td>Jan2011-Sales</td>
       <td>10</td>
       <td>10</td>
       <td>10</td>
   <tr>
   <tr>
       <td>Feb2011-Sales</td>
       <td>10</td>
       <td>10</td>
       <td>10</td>
   <tr>
   etc.

我的问题是——如何迭代原始 HTML？ 例如，我的想法是迭代第一个元素以获取行，然后获取父级的同级 div，以便我可以找到/匹配其子级以获取列。

想法？ 谢谢。

Answer 1

这是一个 jsFiddle，它获取 HTML 数据并从中创建表格： http://jsfiddle.net/jfriend00/ RKBAj/。

做出以下假设：

1. 文档中的每个顶级 div 都是一个产品
2. 每个顶级 div 都有一个代表产品名称的 ID 顶级
3. div 中的每个 span 都是一个月 顶级 div
4. 中的每个 span 都有一个代表产品的类name
5. 跨度的innerHTML 是该产品/月的数据
6. 产品名称可以是任何名称（尽管它们只能是CSS ID 的合法字符）。
7. 月份名称可以是任何名称（尽管它们只能是 CSS 类的合法字符）。
8. 可以有任意数量的月份和产品。
9. 每个产品可以有任意数量的月份。
10. 所有产品不一定具有相同的月份。

然后，您可以通过以下方式迭代数据并将所有数据收集到有组织的数据结构中，并从中构建表。

// iterate over divs which we assume are products
var allProducts = [];
var allMonthsOrder = [];
function parseData() {
    $("body > div").each(function() {
        var allMonthsKey = {};
        var product = {};
        product.name = this.id;
        product.months = {};
        // now iterate each month in this product
        $("span", this).each(function() {
            var month = this.className;
            product.months[month] = this.innerHTML;
            // add unique months to the month array (only if we haven't seen it before)
            if (!allMonthsKey[month]) {
                allMonthsKey[month] = true;
                allMonthsOrder.push(month);     // store these in order encountered
            }
        });
        allProducts.push(product);
    });
}


// data is stored now in allProducts array
// one array element for each product
// each product is an object with a .name attribute and a .months attribute
// each .months attribute is an object where each attribute is a month name and the data for that month

数据的存储方式如下：

allProducts = [
    {
        "name": "coat", 
        "months": {"Jan2011-Sales": "10", "Feb2011-Sales": "10", "Mar2011-Sales": "10"}, 
        ]
    },
    {
        "name": "boot", 
        "months": {"Jan2011-Sales": "10", "Feb2011-Sales": "10", "Mar2011-Sales": "10"}, 
    },
    {
        "name": "hat", 
        "months": {"Jan2011-Sales": "10", "Feb2011-Sales": "10", "Mar2011-Sales": "10"}, 
    }
];

而且，这是从数据创建表的一种方法。生成表的棘手部分是，如果任何产品可以有任意数量的月份，并且所有产品不一定具有相同的月份，那么您必须为存在的每个月份创建一行，并填写产品数据（如果有）该月的数据。

function createTable() {
    var i, j, product, month;
    var html = "<table><tr>";
    // iterate over the product names to make the header row
    html += "<th>Month</th>";
    for (i = 0; i < allProducts.length; i++)
        html += "<th>" + allProducts[i].name + "</th>";
    }
    html += "</tr">

    // now create all the rows.  First column is month, then each column after that is the sales for 
    // a given month for a particular product (one product per columnn)

    for (i = 0; i < allMonthsOrder.length; i++) {
        month = allMonthsOrder[i];
        html += "<tr>" + "<td>" + month + "</td>";
        // iterate through each product and find if it has data for this month
        for (j = 0; j < allProducts.length; j++) {
            product = allProducts[j];
            html += "<td>";
            if (product.months[month]) {
                html += product.months[month];
            }
            html += "</td>";
        }
        html += "</tr>";
    }
    html += "</table>";
}

Answer 2

var snippet = ['<table><thead><tr><th>Name</th><th>Jan-Sales</th><th>Feb-Sales</th><th>Mar-Sales</th></tr></thead><tbody>'];

$('div').each(function()
{
    snippet.push('<tr><td>' + $(this).attr('id') + '</td>');

    $(this).find('span').each(function()
    {
        snippet.push('<td>' + $(this).text() + '</td>');
    });

    snippet.push('</tr>');
});

snippet.push('</tbody></table>');

$('body').html( snippet.join('') );

http://jsfiddle.net/eqfEE/

---

你可能想知道为什么我使用数组而不是仅仅这样做字符串连接。原因很简单：数组的速度要快得多。

当连接字符串时，JavaScript 会丢弃旧字符串，并创建一个全新的字符串。这会导致创建和销毁过多的对象。

另一方面，当使用 .push() 时，旧数组永远不会被丢弃； JavaScript 只是在数组末尾添加一个新元素...

---

现在您已经更新了您的问题并澄清了您希望将产品名称作为表标题，您应该执行以下操作：

var productsInfo = {},
    periods = [],
    countProducts = 0,
    countPeriods = 0,
    i,
    snippet = ['<table><thead><tr><th>Period</th>'];

$('div').each(function()
{
    var $this = $(this),
        productName = $this.attr('id'),
        periodsCounted = false;

    productsInfo[productName] = [];

    countPeriods = Math.max($(this).find('span').each(function()
    {
        productsInfo[productName].push( $(this).text() );

        if (!periodsCounted) periods.push( $(this).attr('class') );
    })
    .length, countPeriods);

    periodsCounted = true;
});

for ( var productName in productsInfo )
{
    snippet.push('<th>' + productName + '</th>');
    countProducts++;
}

snippet.push('</tr></thead><tbody>');

for(i = 0; i < countPeriods; i++)
{
    snippet.push('<tr><th>' + periods[i] + '</th>');

    $.each(productsInfo, function(index, e)
    {
        snippet.push('<td>' + e[i] + '</td>');
    });

    snippet.push('</tr>');
}

snippet.push('</tbody></table>');

$('body').html(snippet.join(''));

使用此处的小提琴： http://jsfiddle.net/eqfEE/1/

注意：此代码可以改进。这只是朝着正确方向的一个推动。

Answer 3

对于完全不同的方式，您可以采用现有的 HTML，并通过简单地指定此 CSS 来显示每个产品的一列：

#coat, #boot, #hat {float: left;}
.Jan-Sales, .Feb-Sales, .Mar-Sales {display: block; margin: 10px;}

这将在每个产品列中从左到右布置产品 div，从上到下布置月份。

你可以在这里看到它： http://jsfiddle.net/jfriend00/V6Dnm/

显然，你可以使用更多 CSS 格式将其格式化为表格（分隔符、适当的间距）。并且，您可以使用 JS 在其上放置列或行标题。

Answer 4

为了进行选择，我最终使用了 2 个循环，如下所示：

 // first loop, get all the "months" from the first div/product
 $("div#coat").each(function(idxMonth) 

 // second loop, get all the products and look for the matching "month"
 $(this).parent().siblings().children('div' + monthClassSelector).each(function(idxSiblingMonth) {

 // where monthClassSelector is something like "Jan2011-Sales" that we got from the 1st loop