Javascript - 通过 ID 在 <li> 之间获取文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7731782/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript - get text between <li> by ID
提问by user978905
I'm trying to write some javascript that will grab the inner text of li elements (1-16) and put them into hidden fields.
我正在尝试编写一些 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>
How do I return the text in between the <li>and put into the hidden field?
如何返回<li>和放入隐藏字段之间的文本？
回答by ckruse
Simple JavaScript:
简单的 JavaScript：
document.getElementById("fileName9").value = document.getElementById("wavName9").innerText;
You could, in this case, also use innerHTML but that would also give you the HTML the element contains.
在这种情况下，您也可以使用 innerHTML 但这也会为您提供元素包含的 HTML。
回答by jfriend00
LI tags don't have a .valueproperty. Using plain javascript, you could do it this way:
LI 标签没有.value属性。使用普通的 javascript，你可以这样做：
oForm.elements["fileName9"].value = document.getElementById("wavName9").innerHTML;
Or, to do all of them from 1 to 16, you could use this loop:
或者，要从 1 到 16 执行所有操作，您可以使用以下循环：
for (var i = 1; i <= 16; i++) {
oForm.elements["fileName" + i].value = document.getElementById("wavName" + i).innerHTML;
}
Or since you also tagged your post for jQuery, using jQuery you could do it like this:
或者因为您还为 jQuery 标记了您的帖子，使用 jQuery 您可以这样做：
$("#fileName9").val($("#wavName9").text());
Or, to do all of them from 1 to 16:
或者，从 1 到 16 执行所有这些操作：
for (var i = 1; i <= 16; i++) {
$("#fileName" + i).val($("#wavName" + i).text());
}
回答by Rob Nield
Use jQuery to do it.
使用 jQuery 来做到这一点。
var myvar = $("#wavName9").html()
回答by Jasper
Using jQuery:
使用jQuery：
$('#fileName9').val($('#wavName9').text());
Note that you can change .text()to .html()to return the HTML structure rather than just the text.
请注意，您可以更改.text()为 . html()返回 HTML 结构，而不仅仅是文本。
You could automate this for multiple <li>'s like so:
您可以<li>像这样为多个自动执行此操作：
$('li[id^="wavName"]').each(function () {
var number = this.id.replace('waveName', '');
$('#fileName' + number).val($(this).text());
});
This selects all <li>'s who's id starts with "wavName" and stores the text within the <li>tag in the hidden input who's id starts with "fileName" and ends with the same integer as the <li>tag.
这将选择所有<li>以“wavName”开头的 id 并将<li>标签内的文本存储在隐藏输入中谁的 id 以“fileName”开头并以与<li>标签相同的整数结尾。
回答by ZeNo
I think this will do in for all li's
我认为这对所有 li 都有用
$("li[id^=wavName]").each(function(){
var $this = $(this);
$this.closest("input[id^=fileName]").val($this.text())
});
回答by Prusprus
Create your li's with id's following such a structure: listitem-n, where n is 1-16 and input fields following the same structure hiddeninputs-n (n = 1-16)
创建您的 li 的 id 遵循这样的结构：listitem-n，其中 n 是 1-16，并且输入字段遵循相同的结构 hiddeninputs-n (n = 1-16)
using jfriend00's code, add it in a loop that will traverse 16 times, incrementing a count variable that you will use to transfer the data from list items to hidden inputs
使用 jfriend00 的代码，将其添加到一个循环中，该循环将遍历 16 次，增加一个计数变量，您将使用该变量将数据从列表项传输到隐藏输入
var count = 0;
for( i=0; i < 16; i++){
count ++;
$("form #hiddeninput-"+count).val($("#listitem-"+count).text());
}
Better validate the code, but there's the general idea.
更好地验证代码，但有一个总体思路。
You could also create the hidden fields in javascript from scratch, which would make the code abit more stable IMO as there's less chances of a hidden field missing in the form when the js is executed.
您还可以从头开始在 javascript 中创建隐藏字段，这将使代码在 IMO 中更加稳定，因为在执行 js 时表单中缺少隐藏字段的可能性较小。
