[英]How to target an item inside a list element by class?
假设我们有一个 ID 为 #ol1 的<ol> ，我们使用 append 方法在其中生成<li>项，这些 li 包含一个输入和一个按钮。
有没有办法通过索引号来定位特定列表项，例如document.querySelectorAll('#ol1 li')[3]以获取第 4 个 li (0,1,2,3) 元素，然后是 select 里面的一个项目通过 class？
如果我们 select 带有class=remove的按钮，我们如何定位它所在的容器并使用someselector.remove()在没有 id 的情况下将其删除，那么基本上我们如何删除 function 知道哪个<li>消除？ （图片解释）？
我正在寻找一个纯粹的 javascript 解决方案，但是如果你建议 jquery 的东西，请包括 js 逻辑。
*msg to mods：我打开了一个新问题，因为编辑前一个问题会显着改变主题。
function append() { var index = document.getElementById("ol1").getElementsByTagName("li").length; var ol = document.getElementById("ol1"); var li = document.createElement("li"); li.innerHTML = (`LIST ITEM <input class=input value=this is list item number ${index}><button class=remove>REMOVE</button>`); ol.append(li) }
<html> <body> <button id="btn1" onclick="append()">Append</button> <ol id="ol1"> </ol> </body> </html>
要回答您的问题，您可以使用 nth-child 或ol.querySelectorAll('li')[idx]
但是你真的想在 OL 上使用 eventListener 和最接近的方法
function append() { var index = document.getElementById("ol1").getElementsByTagName("li").length; var ol = document.getElementById("ol1"); var li = document.createElement("li"); li.innerHTML = (`LIST ITEM <input class=input value=this is list item number ${index}><button class=remove>REMOVE</button>`); ol.append(li) } document.getElementById("ol1").addEventListener("click",function(e) { const tgt = e.target; if (tgt.classList.contains("remove")) tgt.closest("li").remove(); })
<html> <body> <button id="btn1" onclick="append()">Append</button> <ol id="ol1"> </ol> </body> </html>
parentNode定位的另一种方法是简单地访问被单击按钮的父节点。
对于每个button.remove ，我们可以附加一个onclick事件监听器，它会触发以下 function：
const removeListItem = (event) => {
const listItem = event.target.parentNode; // <= This is just the parentNode of the button
ol1.removeChild(listItem);
}
工作示例：
const btn1 = document.getElementById('btn1'); const ol1 = document.getElementById('ol1'); const removeListItem = (event) => { const listItem = event.target.parentNode; ol1.removeChild(listItem); } const append = () => { // FIND LENGTH OF CURRENT LIST const index = ol1.getElementsByTagName('li').length; // BUILD INPUT FOR NEW LIST ITEM let newListItemInput = document.createElement('input'); newListItemInput.classList = 'input'; newListItemInput.setAttribute('value', `this is list item number ${index}`); // BUILD BUTTON FOR NEW LIST ITEM let newListItemButton = document.createElement('button'); newListItemButton.classList = 'remove'; newListItemButton.textContent = 'REMOVE'; newListItemButton.addEventListener('click', removeListItem, false); // BUILD NEW LIST ITEM let newListItem = document.createElement('li'); newListItem.textContent = 'LIST ITEM '; newListItem.appendChild(newListItemInput); newListItem.appendChild(newListItemButton); // APPEND NEW LIST ITEM ol1.appendChild(newListItem); } btn1.addEventListener('click', append, false);
<button id="btn1">Append</button> <ol id="ol1"></ol>
“有没有办法按索引定位特定列表项”
是的 - :nth-child() ，所以：
document.querySelectorAll('#ol1 li:nth-child(3)')
请记住， :nth-child()是 1-indexed，而不是 0-，即第一个元素位于 index 1，而不是 0。
“如果我们 select 按钮带有 class=remove 我们如何定位它所在的容器”
遇到closest() ，它在 DOM 中从特定元素向上导航，直到满足某个选择器条件。
someElement.closest('.foo'); //<-- returns the nearest parent/ancestor with .foo
有没有办法通过索引号来定位特定列表项，例如 document.querySelectorAll('#ol1 li')[3] 以获取第 4 个 li (0,1,2,3) 元素，然后是 select 里面的一个项目通过 class？
如果这意味着您希望始终获得由'#ol1 li'选择的所有元素的集合中的第 4 项，...
不可能使用 CSS：
CSS 的工作方式如下：选择器的所有部分必须匹配元素才能应用规则。
.some-class:nth-child(4)表示：它必须具有some-class的 class并且它必须是其父级的第 4 个子级。 如果您的文档中有 100 个（即：深度嵌套的）项目同时满足两个条件，则所有 100 个项目都将应用规则。
这是因为 CSS 在将规则应用于元素时没有集合的概念。 对于 DOM 中的每一个元素，它都会通过 CSSOM 中的每一个选择器。 如果选择器应用于当前元素，则应用指定的规则。 然后它移动到下一个 DOM 元素。
使用 JavaScript（原版）：
const element = [...document.querySelectorAll('.some-class')][3]; // 0 indexed
if (element) {
// first match of .other-class inside `element`:
element.querySelector('.other-class') // first match
// 4th .other-class inside 4th .some-class:
[...element.querySelectorAll('.other-class')][3]
}
使用 JQuery：
const $el = $('.some-class'):eq(3); // 0 indexed, also
if ($el.is('.some-class')) {
// collection of all `.other-class` elements inside `$el`:
$('.other-class', $el)
}
请注意，在 jQuery 中，您需要检查返回的结果是否是实际的 DOM 元素（通过使用.is() ），因为不匹配的返回值仍然是真实的（一个函数），从而导致细微的错误。
试试 document.querySelector ('#ol1')。 querySelectorAll('li')[3]
当使用Jquery / JavaScript单击上一个列表项时，如何定位嵌套在列表项内的元素？
[英]How do I target an element nested inside a list item when the previous list item is clicked with Jquery/JavaScript?
如何定位没有ID或Class属性的iframe中的元素？
[英]How to target an element inside an iframe that has no Id or Class attributes?
如何定位与所有其他列表项具有相同类的特定列表项
[英]How can I target a specific list item that has the same class as all other list items
尝试使用CSS当前类定位列表项以在激活时强调
[英]Trying to target a list item a with CSS current class to emphasize when active
jQuery-将列表项的元素移到同一项的另一个元素内+对列表的每个项执行此操作
[英]jQuery - moving an element of a list item inside another element of the same item + do this for each item of my list
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.