children 相关问题

React：在当前子组件返回 null 之前渲染另一个子组件？

我不确定这是否可以实施。 我想创建一个新的选项卡组件，其中包含选项卡列表和选项卡面板。选项卡面板应该是另一个反应组件。 但它的最大计数为 3。 例如： 我

克隆 jira 史诗与子问题

虽然有很棒的扩展可以做到这一点，但我正在寻找一个本机解决方案。

VueJs 树递归元素发送到父级

如何在递归子组件 vuejs 中发出事件 以 vue 站点 https://v2.vuejs.org/v2/examples/tree-view.html 中的树为例 您如何将点击传输给家长每个

查找多个 HTML 元素的子元素并用作自定义属性的功能

所以我有以下包含多个 元素的结构，我想在数据属性（data-children）中显示每个元素内的子元素。而不是手动更改 att... 因此，我有以下包含多个 <div> 元素的结构，我想在数据属性 (data-children) 中显示每个元素内的子元素。我希望它能够通过 JS 动态变化，而不是手动更改属性，这样当我添加/删除子元素时它就会发生变化。 <h2 class="amount_title" data-children="1">The amount of children of this element is </h2> <div class="parent_container"> <div class="children_element"> <div> <p>Lorem ipsum dolor sit amet.</p> </div> <button>Button</button> </div> </div> <h2 class="amount_title" data-children="2">The amount of children of this element is </h2> <div class="parent_container"> <div class="children_element"> <div> <p>Lorem ipsum dolor sit amet.</p> </div> <button>Button</button> </div> <div class="children_element"> <div> <p>Lorem ipsum dolor sit amet.</p> </div> <button>Button</button> </div> </div> 所以现在我正在执行以下操作来获取每个元素的子元素并填充每个标题的 data-attribute： const parentContainer = document.querySelectorAll('.parent_container') const amountTitle = document.querySelectorAll('.amount_title') let childrenAmount1 = parentContainer[0].childElementCount amountTitle[0].dataset.children = childrenAmount1 let childrenAmount2 = parentContainer[1].childElementCount amountTitle[1].dataset.children = childrenAmount2 我有一些这样的东西，所以显然不理想。哪个函数可以帮助我遍历所有这些元素并用每个元素的子元素数量相应地填充每个数据集？谢谢你。 我尝试执行 for () 循环，但所有数据集都从数组中的最后一项获取了子项的数量 基于此配置，您的最佳策略是获取每个标题后的下一个元素。 虽然我建议使用包装器根据每个包装器内容设置标题.wrapper > amount_title|parent_container首先循环遍历所有包装器并从包装器引用中获取其子级 const titles = document.querySelectorAll(".amount_title"); titles.forEach((title) => { const next = title.nextElementSibling; if (!next.classList.contains("parent_container")) { return false; } // killswitch title.innerHTML = `The amount of children of this element is ${ next.childElementCount }`; }); <h2 class="amount_title" data-children="1">The amount of children of this element is </h2> <div class="parent_container"> <div class="children_element"> <div> <p>Lorem ipsum dolor sit amet.</p> </div> <button>Button</button> </div> </div> <h2 class="amount_title" data-children="2">The amount of children of this element is </h2> <div class="parent_container"> <div class="children_element"> <div> <p>Lorem ipsum dolor sit amet.</p> </div> <button>Button</button> </div> <div class="children_element"> <div> <p>Lorem ipsum dolor sit amet.</p> </div> <button>Button</button> </div> </div> 编辑： 包装方法： const wrappers = document.querySelectorAll(".wrapper"); wrappers.forEach((wrapper) => { const title = wrapper.querySelector(".amount_title"); const contents = wrapper.querySelector(".parent_container"); if (!title || !contents) { return; } // killswitch title.innerText = `The amount of children of this element is ${ contents.childElementCount }` }); <div class="wrapper"> <h2 class="amount_title" data-children="1">The amount of children of this element is </h2> <div class="parent_container"> <div class="children_element"> <div> <p>Lorem ipsum dolor sit amet.</p> </div> <button>Button</button> </div> </div> </div> <div class="wrapper"> <h2 class="amount_title" data-children="2">The amount of children of this element is </h2> <div class="parent_container"> <div class="children_element"> <div> <p>Lorem ipsum dolor sit amet.</p> </div> <button>Button</button> </div> <div class="children_element"> <div> <p>Lorem ipsum dolor sit amet.</p> </div> <button>Button</button> </div> </div> </div> 只需选择所有标题并使用 forEach 循环即可循环浏览所有这些标题。然后选择下一个兄弟并计算所有具有 child_element 类的元素： window.addEventListener('DOMContentLoaded', getAmountTitles); function getAmountTitles() { const HEADLINES = document.querySelectorAll('h2.amount_title'); HEADLINES.forEach(headline => { let parent_container = headline.nextElementSibling; let amountChildElements = countChildrenElements(parent_container); headline.dataset.children = amountChildElements; headline.insertAdjacentText('beforeend', amountChildElements); }); } function countChildrenElements(parentElement) { return (parentElement.querySelectorAll('.children_element').length); } <h2 class="amount_title">The amount of children of this element is </h2> <div class="parent_container"> <div class="children_element"> <div> <p>Lorem ipsum dolor sit amet.</p> </div> <button>Button</button> </div> </div> <h2 class="amount_title">The amount of children of this element is </h2> <div class="parent_container"> <div class="children_element"> <div> <p>Lorem ipsum dolor sit amet.</p> </div> <button>Button</button> </div> <div class="children_element"> <div> <p>Lorem ipsum dolor sit amet.</p> </div> <button>Button</button> </div> </div>

结合 React Context 和Reducer 并使用 {children} prop 的 Provider 组件无法轻易被逻辑复杂的父组件使用

按照React教程中有关将reducers与Context相结合的内容，我将reducer打包到了Provider组件中： 导出函数 CoursesModeProvider({children, courseDB}) { const [当然...

React.js - this.props.children 从父级传播 .map 结果时的对象

当我从父级传播 .map() 的结果时，我遇到了一些奇怪的行为， this.props.children 正在转换为对象。 例子： 常量项 = [ { id: 1, 名称: "名称1" }, ...

Jquery Draggable Sortable 写入正确的输入，获取子元素不起作用

我正在尝试对可排序 ul 中的一组照片重新排序；要以新顺序保存它们，我必须覆盖匹配的输入字段（名称和标题）： 这是我的 ul 结构： 我正在尝试对可排序的一组照片重新排序ul；要以新顺序保存它们，我必须覆盖匹配的输入字段（名称和标题）： 这是我的ul结构： <ul class="float drag1"> <g:each in="${fotos}" var="foto" status="index" > <li class="float editimg 1" id="${index}"> <div class="float imgbox"> <span class="floatr imgdel" onclick="deletePicture('${foto.name}')" title="Löschen"></span> <img src="${di.createImageURL(bucket:'foo', name: foto.name, format:'m')}" alt="${foto.titel}" /> <g:hiddenField name="fotos[${index}].name" readonly="readonly" value="${foto.name}"/> </div> <input type="text" name="fotos[${index}].titel" class="fototitel" value="${foto.titel}"/> </li> </g:each> </ul> 这就是我的 JS <script type="text/javascript"> $( sort ); function sort() {$('.drag1').sortable({ update: function(event,ui) { var draggingElement = $(ui.item); var ordering = draggingElement.index(); var string1 = 'fotos['+ordering+'].name' ; var string2 = 'fotos['+ordering+'].titel' ; alert(string1+'---'+string2); //the following part doesn´t work, when i give those inputs unique id´s it work´s but i want this to be more self fulfilling. var inputs = draggingElement.getElementsByTagName("input"); inputs[0].attr('name',string1); inputs[1].attr('name',string2); } }); } </script> 警告 string1 和 string2 显示它们是正确的，我只需要更新输入的 name 属性。但在上面的例子中我得到了一个 typeError draggingElement.getElementsByTagName is not a function 我不知道如何获取 DraggingElement 的子输入。 代替 var inputs = draggingElement.getElementsByTagName("input"); inputs[0].attr('name',string1); inputs[1].attr('name',string2); 试试这个 var inputs = draggingElement.find("input"); inputs.eq(0).attr('name',string1); inputs.eq(1).attr('name',string2); 我认为 getElementsByTagName 将为您提供 HTML 元素对象，而您需要 jQuery 元素对象 - 以便使用 attr 方法。 检查 jQuery 手册以获得返回 jQuery 元素数组的正确方法，然后像您所做的那样使用数组访问方法，或者对它们运行 each 迭代器。 （代表问题作者将答案移至答案空间。） 这是满足我需要的脚本，感谢您的回答。 $( sort ); function sort() { $('.drag1').sortable({ update: function(event,ui) { var draggingElement = $('.editimg'); draggingElement.each(function() { var ordering = $(this).index(); var string1 = 'fotos['+ordering+'].name'; var string2 = 'fotos['+ordering+'].titel'; var inputs = $(this).find("input"); inputs.eq(0).attr('name',string1); inputs.eq(1).attr('name',string2); }); } }); };

如何用dart获取xml元素的子元素？

我想要一个元素的所有子元素。 我尝试过以下操作： 导入'包：xml / xml.dart'； 导入'dart：异步'； 导入 'dart:io'; 导入'包：xml / xpath.dart'； 最终书架Xml =...

在 ListView 项目的子项上单击

我有一个 ListView，其中每个项目都由一些 ImageView 和 TextView 组成， 我希望当我点击特定的ImageView时，一些代码将被执行，我应该把这段代码放在哪里......

postgresql统计孩子的数量

树的深度是无限的。例子： +----+--------+--------------------+ |编号 |姓名 |父 ID |价值 | +----+--------+--------------------+ | 1 |测试1 | | 0 | | 2 |测试 2 |...

针对动态创建的孩子

这是一个很长的:) 我有一个生成几个元素的异步函数。我的问题是我想控制台记录我单击的元素的标题。我之前用过e.target指向...

Reactjs/html：卡片上的功能和重定向，但在单击子项时不执行

卡上的重定向和函数执行有问题。单击卡片时应执行这些功能。它可以解决问题，但是当我点击卡片的孩子时 onClick() 失败了......

在 Laravel 中选择递归模型关联中的特定字段

我有一个“程序”表来存储具有许多字段的程序，包括“名称”字段或属性。该表具有“parent_id”字段，以便该表可以存储嵌套的 pr...

如何访问动态添加元素的子节点？

我有一个名为 watchlistsViewEl 的变量，其值分配给我在 index.html 文件中的一个元素。我可以记录变量 watchlistsViewEl.childNodes 和 watchlistsViewEl.children，如何...

在Angular中，如何对子列表进行内容投影？

我有一个组件应该接受任意数量的已知类型的子组件，并在 *ngFor 中使用额外的包装器呈现它们。或者，我可以传递并呈现 的列表吗 我有一个组件应该接受 任意数量 已知类型的子组件，并在 *ngFor 中使用额外的包装器渲染它们。或者，我可以传递并呈现 <ng-template> 的列表吗？ 容器会这样使用： <app-custom-container> <app-custom-child name="1">...</app-custom-child> <app-custom-child name="2">...</app-custom-child> <app-custom-child name="3">...</app-custom-child> </app-custom-container> 内部容器模板我想做这样的事情： template: '<div> <ng-container *ngFor="let child of ...?"> <app-custom-child-internal-wrapper [id]="child.id"> <ng-content/> <!--somehow only render this specific child--> </app-custom-child-internal-wrapper> </ng-content> </div>' 可以做这个或类似的事情吗？ 这是ContentChildren和ngTemplateOutlet的用例...像这样 首先你需要一个指令来标记和获取你想要渲染的任何孩子的模板参考： @Directive({ selector: '[childMarker]'}) export class ChildMarkerDirective { constructor(public templateRef: TemplateRef<any>) { } } 然后将它添加到孩子们： <app-custom-container> <app-custom-child *childMarker name="1">...</app-custom-child> <app-custom-child *childMarker name="2">...</app-custom-child> <app-custom-child *childMarker name="3">...</app-custom-child> </app-custom-container> 在您的自定义容器控制器中，您需要这样的东西来查询内容中的标记： @ContentChildren(ChildMarkerDirective) children 然后在您的模板中，您可以迭代和投影： <div> <ng-container *ngFor="let child of children"> <app-custom-child-internal-wrapper> <ng-container *ngTemplateOutlet="child.templateRef"></ng-container> </app-custom-child-internal-wrapper> </ng-container> </div> 解决了。您只能将 CustomChildComponent 用于模板，如果它们与 @ContentChildren(CustomChildComponent) 一起使用，则会得到一个列表 用法： <app-custom-container> <app-custom-child name="1"> <ng-template #innertemplate> ... </ng-temlate> </app-custom-child> <app-custom-child name="2"> <ng-template #innertemplate> ... </ng-temlate> </app-custom-child> </app-custom-container> 子组件： @Component({ selector: 'app-custom-child', template: '', // template empty by design }) export class CustomChildComponent { @Input() public name!: string; @ContentChild('innertemplate', { read: TemplateRef }) public innerTemplateReference!: TemplateRef<any>; } 父组件： @Component({ selector: 'app-custom-container', template: '<app-some-internal-container> <ng-container *ngFor="let child of contentChildren"> <app-some-internal-wrapper> <ng-container ngTemplateOutlet="child.innerTemplateReference"> </ng-container> </app-some-internal-wrapper> </ng-container> </app-some-internal-container>', }) export class CustomContainerComponent { @ContentChildren(CustomChildComponent) public contentChildren: QueryList<CustomChildComponent>; }

如何递归地循环所有子项？

我有以下内容： 对于 (var i = 0; i < children.length; i++){ if(hasClass(children[i], "lbExclude")){ children[i].parentNode.removeChild(children[i]); } }; I would like it to l...

如何在容器内有不同项目的父容器中为子容器设置相同的高度？

我正在尝试使父容器中的子容器具有相同的高度，尽管元素不同。目标是能够在没有 js 的情况下拥有一个没有固定

从 JS 中的搜索设置 JSON 中的子值

我有一个搜索功能，可以将 XML 文件转换为 JSON 以进行编辑，然后再转换回 XML。 我在 XML 文件中搜索“事件名称”，如果找到，我需要更改“a x z&

让所有的孩子都在上面和左边

我想通过使用 jquery 和 javascript 让所有孩子在父母内部偏移顶部，但我只找到了几种使用循环的方法而且它很长所以我相信有更短的东西 而我...

在函数页面中添加querySelector后崩溃

有了这个函数，每个有子元素的div元素都需要将子元素包裹在一个wrap div中。一切正常，如果 有了这个函数，每个有子元素的div元素都需要将子元素包裹在一个wrap div中。如果一切正常 <button id="run" onclick="wrapChildren(document.querySelector('#element1'))">Run</button> 但是在我插入函数的那一刻： var element = document.querySelector('#element1'); 页面崩溃“devtools 与页面断开连接”。为什么会发生这种情况以及如何解决？ function wrapChildren() { var element = document.querySelector('#element1'); const childElements = Array.from(element.children); if (childElements.length === 0) { return; } const wrapDiv = document.createElement('div'); wrapDiv.id = element.id+"wrap"; childElements.forEach((childElement) => { wrapDiv.appendChild(childElement); }); element.appendChild(wrapDiv); childElements.forEach((childElement) => { wrapChildren(childElement); }); } <div id="element1"> <div id="child1"> <div id="grandchild1"></div> <div id="grandchild2"> <div id="granddrandchild1"></div> <div id="granddrandchild2"></div> <div id="granddrandchild3"> <div id="granddrandgrandchild1"></div> </div> </div> </div> <div id="child2"></div> </div> <button id="run" onclick="wrapChildren()">Run</button>