获取封闭 div 中子 div 的索引。未列出答案

【问题标题】：Get the index of child div in enclosing divs. Not list获取封闭 div 中子 div 的索引。未列出
【发布时间】：2019-07-09 15:40:51
【问题描述】：

我正在构建一个 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>

基本上我知道data-id，所以我想选择它然后获取属于它的索引。

如何在 vanilla javascript（不使用 jQuery）中做到这一点？

【问题讨论】：

所有索引还是一些？
抱歉，DIV 版和 UL 版到底有什么区别？如果您说您知道如何为后者执行此操作，您是指仅适用于 UL 元素的任何特定于角度的方法，还是类似的方法？
stackoverflow.com/questions/13658021/…

标签： javascript

【解决方案1】：

使用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 标签。

【讨论】：

这不是“Angular”方式。
@Bardr How can I do this in vanilla javascript (not using jQuery)?，在我的回答中，For Angular, it's completely different. Provide a sandbox and your actual code, because there is several options to do that in the framework.。在某些时候，你必须学会阅读。

【解决方案2】：

您可以使用querySelector 通过属性值获取元素，如下所示：

// if you want the item with data-id=2
document.querySelector("[data-id='2']")

查看this 获取工作示例

【讨论】：

这不是“Angular”方式。
他问如何在 vanilla javascript（不使用 jQuery）中做到这一点？
我正在构建一个 Angular 7 应用程序我认为他想构建 Angular 应用程序 i> 以 Angular 方式.

【解决方案3】：

你的意思是像this 这样的东西吗？使用ViewChild 指令获取容器，然后使用该元素的childNodes 属性获取子节点。从中您可以获取有关子节点的所有信息（例如data-id 属性值）。

【讨论】：

这不是正确的 Angular 方式。
@ViewChildren 用于多个 div。如果他有 700 个 div，@ViewChild 是不可维护的。
@trichetriche 使用@ViewChild 我只得到容器。并非所有子节点。
你使用 vanillaJS 来请求孩子。你不应该用 Angular 自己去接触 DOM，而应该使用渲染器和元素引用来查询你的元素。
如你所见，我使用ViewChild 指令来获取容器（不是document）。此外，只要我只是从ElementRef 阅读，就没有错。见stackoverflow.com/questions/49654783/…

【解决方案4】：

我想获取父 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>

【讨论】：