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

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

使用API

const container=document.querySelector（'div.container'）；
const items=[…container.querySelectorAll（'div.item'）；
控制台日志（项目）

使用API


const container=document.querySelector（'div.container'）；
const items=[…container.querySelectorAll（'div.item'）；
控制台日志（项目）
您可以使用
querySelector
通过属性值获取元素，如下所示：

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

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

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

检查一个工作示例
您的意思是类似的吗？使用
ViewChild
指令获取容器，然后使用此元素的
childNodes
属性获取子节点。从中，您可以获得有关子节点的所有信息（例如，
数据id
属性值）。
您的意思是这样的吗？使用
ViewChild
指令获取容器，然后使用此元素的
childNodes
属性获取子节点。从中，您可以获得有关子节点的所有信息（例如，
数据id
属性值）

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

您可以尝试以下方法：


函数getIndex（dId）{
var list=[].slice.call（document.querySelectorAll（'.container.item'）；
var idx=list.map（函数（el，i）{
var d=el.getAttribute（'data-id'）；
如果（d==dId）
返回i；
}).filter（i=>i！=未定义）；
返回idx；
}
console.log（getIndex（“1”））；
日志（getIndex（“2”））；
日志（getIndex（“3”））


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

您可以尝试以下方法：


函数getIndex（dId）{
var list=[].slice.call（document.querySelectorAll（'.container.item'）；
var idx=list.map（函数（el，i）{
var d=el.getAttribute（'data-id'）；
如果（d==dId）
返回i；
}).filter（i=>i！=未定义）；
返回idx；
}
console.log（getIndex（“1”））；
日志（getIndex（“2”））；
日志（getIndex（“3”））

全部索引还是部分索引？对不起，DIV和UL版本之间到底有什么区别？如果你说你知道如何处理后者，你是指任何只存在于UL元素中的特定角度的方法，还是类似的方法？所有索引还是一些？对不起，但是DIV和UL版本之间到底有什么区别？如果你说你知道如何处理后者，你指的是任何只存在于UL元素中的特定角度的方法，或者类似的方法吗？这不是“角度”的方式。他问我如何在普通javascript中做到这一点（不使用jQuery）？我正在构建Angular 7应用程序我认为他希望以Angular方式构建Angular应用程序。这不是“Angular”方式。他问我如何用香草javascript（不使用jQuery）实现这一点？我正在构建Angular 7应用程序我认为他希望以Angular方式构建Angular应用程序。这不是“Angular”方式。@Bardr
我如何在香草javascript中做到这一点（不使用jQuery）？
，在我的回答中，
对于Angular，这是完全不同的。提供一个沙箱和您的实际代码，因为在框架中有几个选项可供选择。
。在某种程度上，你必须学会阅读。这不是“角度”的方式。@Bardr
我如何在普通javascript中做到这一点（不使用jQuery）？
，在我的回答中，
对于角度，这是完全不同的。提供一个沙箱和您的实际代码，因为在框架中有几个选项可供选择。
。在某些时候，你必须学会阅读。这不是正确的角度方式。
@ViewChildren
对于几个div。如果他有700个div，
@ViewChild
是不可维护的。@trichetriche使用
@ViewChild
我只得到容器。不是所有的子节点。您可以使用vanillaJS请求子节点。您不应该亲自使用Angular触碰DOM，而是使用渲染器和元素引用来查询元素。正如您所看到的，我正在使用
ViewChild
指令来获取容器（而不是
document
）。而且，只要我只阅读
ElementRef
就没有什么不对。请看，这不是正确的角度方式。
@ViewChildren
用于几个div。如果他有700个div，
@ViewChild
是不可维护的。@trichetriche使用
@ViewChild
我只得到容器。不是所有的子节点。您可以使用vanillaJS请求子节点。您不应该亲自使用Angular触碰DOM，而是使用渲染器和元素引用来查询元素。正如您所看到的，我正在使用
ViewChild
指令来获取容器（而不是
document
）。而且，只要我只阅读
ElementRef
就没有什么不对。看见