如何获取和过滤嵌套列表中所有父级的Data属性，直到html元素的target(div)

Question

我有一个嵌套的(UL->LI->UL-LI..)列表。在任何单击的节点上，我都使用ParentsUntil()来查找所有的父节点，直到某个祖先元素。

在每个嵌套元素的数据属性(数据权重：)中，都有表示权重的数字。

我想把总重量加起来，直到家长。这些数字(区域)位于每个项目的数据区域字段中。

<ul class="level-1 yes"  data-weight="12" data-weight-total="0">
<li class="item-i" data-weight="22" >I</li>
<li class="item-ii" data-weight="4"  data-weight-total="0">II
<ul class="level-2 yes" data-weight="12">
<li class="item-a" data-weight="1.4">A</li>
<li class="item-b" data-weight="128" data-weight-total="0">B
<ul class="level-3" data-weight="63" data-weight-total="0">
<li class="item-1" data-weight="54">1</li>
<li class="item-2" data-weight="23">2</li>
<li class="item-3" data-weight="107">3</li>
</ul>
</li>
<li class="item-c" data-weight="231">C</li>
</ul>
</li>
<li class="item-iii">III</li>
</ul>

$( "li.item-2" )
.parentsUntil( $( "ul.level-1" ), ".yes" );

在上面的列表中，

1. 如何从单击的项目中获取它们的数组/列表是否将其data-weight[键，值]添加到父项？例如$VarArrayCargoVessel
2. 当我向上遍历时，我如何对每个/嵌套列表的权重求和/合计(数据权重合计)，并填充data-weight-total？我现在有零，因为我不知道如何插入/写入数组值

Answer 1

$("li").click(function(event){
event.stopPropagation();
var list = $(this).closest("ul");
var children = list.children();
var values = [];
for(var i = 0; i < children.length; i++){
values.push(parseInt((children[i].getAttribute("data-weight") !== null) ? children[i].getAttribute("data-weight") : "0"));
}
var sum = 0;
for(var j = 0; j < values.length; j++){
sum += values[j];
}
$("#summed").html(sum);
});

li{
cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="level-1 yes"  data-weight="12" data-weight-total="0">
<li class="item-i" data-weight="22" >I</li>
<li class="item-ii" data-weight="4"  data-weight-total="0">II
<ul class="level-2 yes" data-weight="12">
<li class="item-a" data-weight="1.4">A</li>
<li class="item-b" data-weight="128" data-weight-total="0">B
<ul class="level-3" data-weight="63" data-weight-total="0">
<li class="item-1" data-weight="54">1</li>
<li class="item-2" data-weight="23">2</li>
<li class="item-3" data-weight="107">3</li>
</ul>
</li>
<li class="item-c" data-weight="231">C</li>
</ul>
</li>
<li class="item-iii">III</li>
</ul>
<div id="summed"></div>

好吧，让我们一步一步地完成这个。我们要做的第一件事是为每个"li"项目创建一个点击事件。如果单击了li项目，我们将执行我们的函数("函数(事件)")。

第一行阻止事件向上传播。否则jQuery将转到第一个"ul"项，并执行每个"ul"元素的代码。我们会一直收到第一份名单。

http://api.jquery.com/event.stopPropagation/

然后，我们得到最接近的"ul"元素，并将其存储在变量"list"中。我们不想要列表本身，这就是为什么我们将其子元素("li"元素)存储在变量"children"中。

然后，我们循环遍历每个子级，并将"数据权重"属性(方法"getAttribute")存储在数组"values"中。请注意，我们只在属性实际存在的情况下存储该属性。如果没有，我们只存储"0"。

https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute

然后，我们创建一个变量"sum"，存储我们汇总的属性。为此，我们循环遍历数组，并将值(+=values[j])添加到sum变量中。

最后一步将sum变量写入div的html中，id为#sumed(检查html部分)。

进一步阅读：

https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute
http://api.jquery.com/closest/
http://api.jquery.com/click/
http://api.jquery.com/event.stopPropagation/
http://api.jquery.com/children/
http://www.sitepoint.com/shorthand-javascript-techniques/
http://api.jquery.com/html/

版本2:

$("li").click(function(event){
event.stopPropagation();
var list = $(this).find("ul").first();
console.log(list);
var children = list.children();
var values = [];
for(var i = 0; i < children.length; i++){
values.push(parseInt((children[i].getAttribute("data-weight") !== null) ? children[i].getAttribute("data-weight") : "0"));
}
var sum = 0;
for(var j = 0; j < values.length; j++){
sum += values[j];
}
$("#summed").html(sum);
});

li{
cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="level-1 yes"  data-weight="12" data-weight-total="0">
<li class="item-i" data-weight="22" >I</li>
<li class="item-ii" data-weight="4"  data-weight-total="0">II
<ul class="level-2 yes" data-weight="12">
<li class="item-a" data-weight="1.4">A</li>
<li class="item-b" data-weight="128" data-weight-total="0">B
<ul class="level-3" data-weight="63" data-weight-total="0">
<li class="item-1" data-weight="54">1</li>
<li class="item-2" data-weight="23">2</li>
<li class="item-3" data-weight="107">3</li>
</ul>
</li>
<li class="item-c" data-weight="231">C</li>
</ul>
</li>
<li class="item-iii">III</li>
</ul>
<div id="summed"></div>

注意答案中的第三行。我已将其更改为：

var list = $(this).find("ul").first();

版本3:

$("li").click(function(event){
event.stopPropagation();
var children = $(this).find("ul").first().children();
if(children.length === 0){
children = $(this);
}
console.log(children);
var values = [];
for(var i = 0; i < children.length; i++){
values.push(parseFloat((children[i].getAttribute("data-weight") !== null) ? children[i].getAttribute("data-weight") : "0"));
}
var sum = 0;
for(var j = 0; j < values.length; j++){
sum += values[j];
}
$("#summed").html(sum);
});

li{
cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="level-1 yes"  data-weight="12" data-weight-total="0">
<li class="item-i" data-weight="22" >I</li>
<li class="item-ii" data-weight="4"  data-weight-total="0">II
<ul class="level-2 yes" data-weight="12">
<li class="item-a" data-weight="1.4">A</li>
<li class="item-b" data-weight="128" data-weight-total="0">B
<ul class="level-3" data-weight="63" data-weight-total="0">
<li class="item-1" data-weight="54">1</li>
<li class="item-2" data-weight="23">2</li>
<li class="item-3" data-weight="107">3</li>
</ul>
</li>
<li class="item-c" data-weight="231">C</li>
</ul>
</li>
<li class="item-iii">III</li>
</ul>
<div id="summed"></div>

Answer 2

查看以下jQuery方法，它们就是您所需要的：

• CCD_ 3(链接)
• CCD_ 4(链路)
• find(链路)/children(链路)

例如，在页面加载时，您希望找到具有data-weight-total属性的每个节点，遍历其具有data-weight属性的所有(直接或全部)子节点，获取它们的总和，并将其分配给节点的data-weight-total属性。如果你只想要直系亲属，你可以使用.children()，或者全部使用.find():

$( document ).ready(function(){ // DOM ready
$('[data-weight-total]').each(function(){ 
var total = 0;
$(this).find('[data-weight]').each(function(){
total = total + parseInt($(this).attr('data-weight'));
});
$(this).attr('data-weight-total',total);
});
})

这将在加载文档后立即计算data-weight-total值，并将其分配给具有此类属性的所有节点。如果你需要解释函数中发生的任何事情，请告诉我。