Question

我正在构建Angular 7应用程序。我想获取父div内某个div的“索引”或行。

我的标记如下：

<div class="container">
  <div class="item" data-id="1" />
  <div class="item" data-id="2" />
  <div class="item" data-id="2" />
  <div class="item" data-id="3" />
</div>

如果标记如下所示，我知道我可以轻松地做到这一点，但是如果可以避免的话，我不想使用列表。

<ul class="container">
 <li class="item" data-id="1" />
 <li class="item" data-id="2" />
 <li class="item" data-id="2" />
 <li class="item" data-id="3" />
</ul>

基本上我知道数据ID，所以我想选择它，然后获取属于它的索引。

如何在普通javascript中执行此操作（不使用jQuery）？

Answer 1

您可以使用if (command === "buy-pickaxe") { if (profile.level < 15) { message.reply("You can't afford this item!") } else if (profile.level + 10 > 15) { var role = message.guild.roles.find(role => role.name === "Pickaxe"); dl.AddLevel(message.author.id, -15) message.member.addRole(role); message.reply("You purchased a pickaxe!") } } if (command === "buy-dagger") { if (profile.level < 25) { message.reply("You can't afford this item!") } else if (profile.level + 10 > 25) { await dl.AddLevel(message.author.id, -25) var role = message.guild.roles.find(role => role.name === "Dagger"); message.member.addRole(role); message.reply("You purchased a dagger!") } }通过元素的属性值获取元素，如下所示：

querySelector

检查this以获取有效示例

Answer 2

使用querySelector API

const container = document.querySelector('div.container');

const items = [...container.querySelectorAll('div.item')];

console.log(items);

<div class="container">
  <div class="item" />
  <div class="item" />
  <div class="item" />
  <div class="item" />
</div>

对于Angular，这是完全不同的。提供一个沙箱和您的实际代码，因为在框架中有几个选项可以做到这一点。在此之前，我已经删除了Angular标签。

Answer 3

我想获取父div内某个div的“索引”或行。

您可以尝试以下方式：

function getIndex(dId){
  var list = [].slice.call(document.querySelectorAll('.container .item'));
  var idx = list.map(function(el, i){
              var d = el.getAttribute('data-id');
              if(d == dId)
                return i;
            }).filter(i => i != undefined);  
  return idx;
}
console.log(getIndex("1"));
console.log(getIndex("2"));
console.log(getIndex("3"));

<div class="container">
  <div class="item" data-id="1" />
  <div class="item" data-id="2" />
  <div class="item" data-id="2" />
  <div class="item" data-id="3" />
</div>

Answer 4

您是说类似this的意思吗？使用ViewChild指令获取容器，然后使用此元素的childNodes属性获取子节点。由此，您可以获得所需的有关子节点的所有信息（例如data-id属性值）。

在封闭的div中获取child div的索引。未列出

4 个答案: