0

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

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

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

<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[key,value] 将它们的数组/列表从单击的项目获取到父项目？例如 $VarArrayCargoVessel
  2. 当我向上遍历时，如何对每个/nested 列表的总权重（数据权重总计）进行求和并填充\填充data-weight-total？我现在有零，因为我不知道如何插入/写入数组值
4

2 回答 2

0 

$("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”中。我们不想要列表本身，这就是我们将其子项（“li”元素）存储在变量“children”中的原因。

然后我们遍历每个孩子并将“数据权重”属性（方法“getAttribute”）存储在数组“values”中。请注意，我们仅在属性实际存在时才存储该属性。如果不是，我们只存储“0”。

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

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

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

于 2015-04-19T08:22:57.210 回答
0

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

例如，在页面加载时，您希望找到每个具有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在加载文档后立即计算并为具有此类属性的所有节点分配值。如果您需要对函数中发生的任何事情进行解释，请告诉我。

于 2015-04-19T08:13:22.860 回答