Question

我有一些具有属性的div：rowNumber。其中一个属性有isOpen=1。

其后的所有其他人都有isOpen=0。

例如：

<div class="statusCell" isOpen="0" rowNumber="1">

我希望获得所有带有statusCell的div，这些div在isOpen = 1的div之后找到，并且将rowNumber减1。

我需要做类似的事情：

$('.statusCell[isOpen=1]').nextAll('.statusCell[isOpen=0]').each(function() {
    var rowNumber = $(this).attr("rowNumber");
    var newRowNumber = parseInt(rowNumber, 10) - 1;
    $(this).attr('rowNumber', newRowNumber.toString());
});

但它不起作用，因为：

$('.statusCell[isOpen=1]').nextAll('.statusCell[isOpen=0]').length

为零..

示例代码是：

<td class="DesignedTableTD">
    <div class="statusCell" style="cursor:pointer;" isOpen="0" rowNumber= "1">
       <p style="display:inline;" class="yellow" title="fd">
         <img alt="Active" src="@Url.Content("~/Images/play.png")" class="help"/>
       </p>&#9661;
    </div>
</td>

任何帮助表示赞赏！

Answer 1

nextAll选择所选元素的下一个匹配的兄弟节点，这不是这里的情况，您可以使用index()方法：

var $statusCell = $('.statusCell[isOpen]'),
          $open = $statusCell.filter('[isOpen=1]'),
              i = $statusCell.index($open);

$statusCell.filter(':gt('+i+')').foo();

// Decreasing attributes' value
// $statusCell.slice(++i).attr('rowNumber', function(_, value) {
//    return +value - 1;                           
// });

请注意，isOpen和rowNumber不是有效的属性，如果网页的文档类型为HTML5，则可以使用data-*属性。

Answer 2

...替代地

var oStatCell = querySelectorAll(".statusCell[isOpen=1]");
for(i = 0; i < oStatCell.length; i++) {
    var cStatCell = oStatCell[i].querySelectorAll(".statusCell[isOpen=0]");
    for(j = 0; j < cStatCell.length; j++) {
        cStatCell[j].setAttribute("rowNumber", String(parseInt(cStatCell[j].getAttribute("rowNumber")) - 1));
    }
}

不是说这是一个更好的选择，但我认为有一个非基于库的选项是很好的。

querySelectorAll（）文档：https://developer.mozilla.org/en-US/docs/Web/API/Document.querySelectorAll

获取div后的所有div并将其属性减1

2 个答案: