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中的每个跨度都是一个月
4. 顶级div中的每个跨度都有一个表示产品名称的类
5. span的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>";
}