Question

<h3>Shirts</h3>
<ul id='list'>
    <li>Biker Jacket</li>
    <li>Mens Shirt</li>
</ul>

我需要获得console.log的第二个li元素。我尝试了下面的代码，但是我只能访问第一个li元素

document.querySelector("li").onclick = () => {
    console.log("Biker Jacket");
};

Answer 1

只需使用opts := options.GridFSUpload() opts.SetMetadata(bsonx.Doc{{Key: "content-type", Value: bsonx.String("application/json")}}) if ustream, err = bucket.OpenUploadStream("test.txt", opts); err != nil { t.Fatal(err) }方法，然后像这样定位第二个querySelectorAll()元素：

li

document.querySelectorAll("#list li")[1].onclick = () => {
  console.log("Biker Jacket");
};

Answer 2

您可以使用li的onclick传递元素，并使用textContent打印其文本

function a(e)
{
console.log(e.textContent)
}

<h3>Shirts</h3>
<ul id='list'>
    <li onclick="a(this)">Biker Jacket</li>
    <li onclick="a(this)">Mens Shirt</li>
</ul>

Answer 3

第二个使用querySelectorAll[1]：

document.querySelector("li").onclick = () => {
    console.log("Biker Jacket");
};
document.querySelectorAll("li")[1].onclick = () => {
    console.log("Mens Shirt");
};

<h3>Shirts</h3>
<ul id='list'>
    <li>Biker Jacket</li>
    <li>Mens Shirt</li>
</ul>

由于您似乎想console.log单击列表项的文本内容，因此可以执行以下操作：

function showText(elem) {
  console.log(elem.innerText);
}
document.querySelectorAll("li").forEach(li => li.addEventListener("click", () => showText(li)));

<h3>Shirts</h3>
<ul id='list'>
  <li>Biker Jacket</li>
  <li>Mens Shirt</li>
</ul>

Answer 4

您可以使用:nth-child(x)伪选择器将元素放在位置x上，如下所示：

document.querySelector("ul#list > li:nth-child(2)").onclick = () => {
    console.log("Biker Jacket");
};

<h3>Shirts</h3>
<ul id='list'>
    <li>Biker Jacket</li>
    <li>Mens Shirt</li>
</ul>

Answer 5

有几种选择方式：

const item = document.querySelector("ul>li:nth-child(2)")

或

const item = document.querySelectorAll('#list li')[1]

或者它只是您所需列表中的最后一件事：

const items = document.querySelectorAll('#list li');
const item = items[items.length-1];

选择项目后，向其添加点击处理程序：

item.addEventListener('click', ()=>{
  console.log(this.innerText);
});

如何使用JavaScript onclick console.log第二个li元素

5 个答案: