JavaScript - 通过ID获取<li>标签中的文本

Question

我正在尝试编写一些 JavaScript 代码，以获取 li 元素（1-16）的内部文本，并将其放入隐藏字段中。

   var myValue9 = document.getElementById("fileName9").value;
   oForm.elements["fileName9"].value = myValue9;


 <input name="fileName9" type="hidden" id="fileName9" />

<li id="wavName9"> Some Text </li> 

如何将<li>之间的文本放入隐藏字段中？

- user978905

Answer 1

简单的JavaScript：

document.getElementById("fileName9").value = document.getElementById("wavName9").innerText;

在这种情况下，您也可以使用innerHTML，但这也会提供元素包含的HTML。

- ckruse

---

我认为Firefox不支持innerText - 在Firefox上，您必须使用textContent。 - jfriend00

Answer 2

LI标签没有.value属性。使用纯JavaScript，您可以这样做：

oForm.elements["fileName9"].value = document.getElementById("wavName9").innerHTML;

或者，要从1到16执行所有操作，您可以使用以下循环：

for (var i = 1; i <= 16; i++) {
    oForm.elements["fileName" + i].value = document.getElementById("wavName" + i).innerHTML;
}

或者，既然您还为jQuery标记了帖子，您可以使用jQuery来完成它：

$("#fileName9").val($("#wavName9").text());

或者，从1到16全部执行：

for (var i = 1; i <= 16; i++) {
    $("#fileName" + i).val($("#wavName" + i).text());
}

- jfriend00

Answer 3

使用jQuery：

$('#fileName9').val($('#wavName9').text());

请注意，您可以将 .text() 更改为 .html()，以返回 HTML 结构而不仅仅是文本。

您可以像这样自动化多个 <li>：

$('li[id^="wavName"]').each(function () {
    var number = this.id.replace('waveName', '');
    $('#fileName' + number).val($(this).text());
});

这将选择所有id以“wavName”开头的<li>，并将<li>标签中的文本存储在id以“fileName”开头并以与<li>标签相同的整数结尾的隐藏输入中。

- Jasper

Answer 4

我认为这对所有li元素都有效

$("li[id^=wavName]").each(function(){
var $this = $(this);
$this.closest("input[id^=fileName]").val($this.text())
});

- ZeNo

Answer 5

创建带有ID的列表项，其结构应为listitem-n，其中n为1-16，输入字段遵循相同的结构hiddeninputs-n（n = 1-16）

使用jfriend00的代码，在一个循环中添加它，该循环将遍历16次，递增一个计数变量，您将使用它将数据从列表项传输到隐藏输入

var count = 0;
for( i=0; i < 16; i++){
  count ++;

  $("form #hiddeninput-"+count).val($("#listitem-"+count).text());

}

更好的验证代码，但这是一个总体的想法。

您也可以使用 JavaScript 从头创建隐藏字段，这将使代码更加稳定，因为在执行 js 时表单中缺少隐藏字段的可能性较小。

- Prusprus

Answer 6

使用jQuery来完成它。

var myvar = $("#wavName9").html()

- Rob Nield

---

将整个框架添加到解决单个JavaScript问题可能不是正确的解决方案。 - Joseph Yaduvanshi

@JimSchubert：OP在问题中标记了“jquery”，因此Rob没有添加任何内容。 - Blazemonger

@mblase75同意，但是看帖子很明显OP没有使用jQuery。 - Joseph Yaduvanshi