Question

我想对html代码进行操作。

我有这段代码：

<div id="LinesPlace" class="inlineBlock">
<div id="ExpensesId_2" class="width100 inlineBlock ExpensesViewList" style="border-top: 1px solid #dddddd;">
    <div class="width4 cbViewList">
        <span>
            <input type="checkbox" name="cbExpensesView[]" value="2" class="cbExpensesView" id="cbExpensesView_2">
        </span>
    </div>
    <div class="width26 categoryViewList">
        <span>
            <img id="" class=" floatA inlineBlock" src="/Interface/Images/ExampleCategory.png" alt="category icon">
        </span>
        <span class="E_CatName Food">Food</span>
    </div>
    <div class="width20 dateViewList"><span>14-09-2015</span></div>
        <div class="width20 amountViewList">
            <span>2 $</span>
        </div>
        <div class="width20 repeatedViewList">
            <span>Repeated: none</span>
        </div>
    <div class="width10 noteViewList" style=""></div>
</div>
<div id="ExpensesId_3" class="width100 inlineBlock ExpensesViewList" style="border-top: 1px solid #dddddd;">
    <div class="width4 cbViewList">
        <span>
            <input type="checkbox" name="cbExpensesView[]" value="2" class="cbExpensesView" id="cbExpensesView_3">
        </span>
    </div>
    <div class="width26 categoryViewList">
        <span>
            <img id="" class=" floatA inlineBlock" src="/Interface/Images/ExampleCategory.png" alt="category icon">
        </span>
        <span class="E_CatName Food">Food</span>
    </div>
    <div class="width20 dateViewList"><span>14-09-2015</span></div>
        <div class="width20 amountViewList">
            <span>2 $</span>
        </div>
        <div class="width20 repeatedViewList">
            <span>Repeated: none</span>
        </div>
    <div class="width10 noteViewList" style=""></div>
</div>

现在我可以看到我有＆＃34; LinesPlace＆＃34; id和那里我有很多div（ExpensesId_2，ExpensesId_3 ......等等......）。

我想创建获取所有类别类型的图表（如食物，电话等等）并获取所有金额，如果一个类别显示超过一次我们总和（例如，如果我们有2个食物我需要在标签中获得食物，在数据中获得4美元，我需要2美元的线条。我得到了硬编码的例子：

var barData = {
                labels: ["Food","Phone","Clothing"],
                datasets: [{
                    fillColor: "#8f37b1",
                    strokeColor: "#8f37b1",
                    data: [100,155,500]
                }]
            }

我如何在javascript / jQuery中操作它以获得类似的效果？

请帮助=]

此致 Rafael jr。

Answer 1

要执行您提出的建议，您需要使用脚本来解析页面内容。好消息是你的HTML结构合理 - 你有重复的部分包含分解数据的类和标签。

您要做的是创建一个新的空数组和对象。让我们称之为expenseArray和expenseTotals。像这样创建一个jQuery选择器：

$("div.ExpensesViewList")

现在你有一套所有费用。您现在可以使用.each。

遍历此数组

$("div.ExpensesViewList").each(function(){
    //Parse the contents of the Expense
    //Add the values you found from each item to a new object in expenseArray
    //Add values to any existing values in expenseTotals
});

//Add expenseTotals to expenseArray as a final element in expenseArray

您希望expenseArray中的任何给定行与您为expenseTotals创建的对象类型相同。完成后，这将成为数组中的最后一个条目。

现在您已将所有这些数据存储在一个对象数组中，您可以遍历数组并创建图表，图形或任何您喜欢的数据。

我不得不问这个问题 - html中的数据从哪里开始？如果它是由Web服务器上的某些脚本生成的，那么以json格式从服务器获取数据并跳过将其全部解析出页面将会容易得多。如果您手动编码页面中的数据，那么创建数据数组然后从数组中创建html和图表会更有意义，而不是相反。

html代码的图表和操作

1 个答案: