从<li>中的<input />获取值,并将值附加到</li> <li>中作为链接(a)

时间:2015-09-25 20:12:25

标签: jquery input append each

我试图从li中的每个输入中获取值,并将值作为链接附加到标签中。这是我的代码。有些事情显然是错的。我该如何解决这个问题?

$("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>

4 个答案:

答案 0 :(得分:1)

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

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

答案 1 :(得分:0)

我迭代输入,用this引用它们的值,然后添加以下链接:

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

答案 2 :(得分:0)

你的行

var random = Math.floor(Math.random()*array.length)

$('#svg.clickit .logo ').css({ fill: array[random], stroke: array[random] })

每次都获得第一场比赛的价值。

试试这个:

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

答案 3 :(得分:0)

这里有一些工作代码。您没有引用选择器拥有的输入。 &#39; ele&#39;函数中的参数是所选标签的数组。然后,您可以在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>');
    });
});