从 <li> 中的 <input> 获取值并将值作为 link 添加到 <li> (a)

Question

我试图从 li 中的每个输入中获取值，并将该值作为 link 附加到标签中。这是我的代码。显然有些地方不对劲。我该如何解决这个问题？

$("ul li label").each(function() {
 var $link = $("ul li label input").val(); 
 $(this).append('<span><a target="_blank" href="' + $link + '"> PDF-Download</a></span>');
});

<ul>
    <li><label><input type="checkbox" value="/first.pdf" />first</label></li>
    <li><label><input type="checkbox" value="/second.pdf" />second</label></li>
    <li><label><input type="checkbox" value="/third.pdf" />third</label></li>
</ul>

最后应该是这样的：

<ul>
    <li><label><input type="checkbox" value="/first.pdf" />first<a target="_blank" href="/first.pdf"> PDF-Download</a></label></li>
    <li><label><input type="checkbox" value="/second.pdf" />second<a target="_blank" href="/second.pdf"> PDF-Download</a></label></li>
    <li><label><input type="checkbox" value="/third.pdf" />third<a target="_blank" href="/third.pdf"> PDF-Download</a></label></li>
</ul>

Answer 1

var $link = $("ul li label input").val(); 是问题所在。您需要使用 this 的实例从相应的 input

中获取内容

var $link = $(this).find("input").val();

Answer 2

我会遍历输入，用 this 引用它们的值并在 with:

之后添加 link

$("ul li label input").each(function() {
 var $link = $(this).val(); 
 $(this).parent().after(' <span><a target="_blank" href="' + $link + '"> PDF-Download</a></span>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
    <li><label><input type="checkbox" value="/first.pdf" />first</label></li>
    <li><label><input type="checkbox" value="/second.pdf" />second</label></li>
    <li><label><input type="checkbox" value="/third.pdf" />third</label></li>
</ul>

Answer 3

你的线路

var $link = $("ul li label input").val();

每次都获取第一个匹配项的值。

试试这个：

$("ul li label").each(function() {
    var $link = $(this).find("input").val();    
    $(this).append('<span><a target="_blank" href="' + $link + '"> PDF-Download</a></span>');
});

Answer 4

这是一些工作代码。您没有引用选择器拥有的输入。函数中的 'ele' 参数是所选标签的数组。然后，您可以在 val() 方法中使用它来确保将输入与正确的值相匹配。见下文。

   $(function() {
    $('ul li label').each(function(i, ele) {
            var $link = $("input", ele).val();
        $(ele).append('<span><a target="_blank" href="' + $link + '"> PDF-Download</a></span>');
    });
});

从 <li> 中的 <input> 获取值并将值作为 link 添加到 <li> (a)

get value from <input> which is in a <li> and append value into <li> as a link (a)

each

jquery

input

append