如何获取和过滤嵌套列表中所有父项的数据属性，直到 html 元素的目标（div）？

Question

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

在每个嵌套元素的数据属性（data-weight:）中，都有一个数字代表权重。

我想sum/aggregate总重量直到父级。这些数字（区域）位于每个项目的数据区域字段中。

<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" );

在上面的列表中，

如何从点击的项目中获取 array/list 个项目使用 data-weight [键，值] 到父项？例如$VarArrayCargoVessel
当我向上遍历时，我如何sum/total 每个/嵌套列表的权重（数据权重总计）和populate\fill-in data-weight-total?我现在有零，因为我不知道如何 insert/write 到数组值

Answer 1

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

each (link),
attr (link),
find (link) / children (link)

例如，在页面加载时，您想要找到具有 data-weight-total 属性的每个节点，遍历其所有（立即或全部）children 具有 data-weight attribute，得到它们的和，赋值给节点的data-weight-total属性。如果你只想要立即 children，你可以使用 .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 值并将其分配给具有此类属性的所有节点。如果您需要解释函数中发生的任何事情，请告诉我。

Answer 2

$("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 项目，我们将执行我们的函数 ("function(event)")。

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

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

然后我们获取最接近的 "ul" 元素并将其存储在变量 "list" 中。我们不需要列表本身，这就是我们将其 children（"li" 个元素）存储在变量 "children" 中的原因。

然后我们遍历每个 children 并将 "data-weight" 属性（方法 "getAttribute"）存储在数组 "values" 中。请注意，我们只存储实际存在的属性。如果不是，我们只存储“0”。

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

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

最后一步将 sum 变量写入 div 的 html 中，id 为 #summed（检查 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>

如何获取和过滤嵌套列表中所有父项的数据属性，直到 html 元素的目标（div）？

How to Get and filter Data attribute of all parents in a nested list, till a target (div) of html element?

javascript

jquery

html

nested-lists

parents