[英]Need To Add Link to text of List Item without .append()
console.log(data)
var link
$listSelector = $("#top5CompaniesList") //Your list element
$.each(data.result, function(i, obj) {
$listSelector.append('<li>');
link = $('<a href="dashboard.php#companyInfo?'+obj.symbol+'">'+obj.symbol+'</a>').click(function(){
$('.nav-pills a[href=#companyInfo]').tab('show') ;
$('body').scrollTop(0);
$('#companySearchInput').val(obj.symbol);
$('#companySearchButton').click();
return false;
});
$listSelector.append(link);
$listSelector.append('<br> Otherdata: '+obj.otherdata+'</li>');
});
Using the code above I'm trying to add list items to a list that includes a link which I have custom behavior designed for. 使用上面的代码,我试图将列表项添加到包含链接的列表中,该链接具有我设计的自定义行为。 The behavior works, except that there's a line break on the page where each .append() call happens.I'd like the list item to appear as one unbroken line.
这种行为是可行的,除了在每个.append()调用发生的页面上有一个换行符之外,我希望列表项显示为一条连续的行。 I tried using both .wrap() and .wrapInner(), but those seem to replace the entire innerHTML of the list item.
我尝试同时使用.wrap()和.wrapInner(),但是它们似乎替换了列表项的整个innerHTML。 Honestly I know they're probably the solution but I can't seem to wrap my head around the logic.
老实说,我知道这可能是解决方案,但我似乎无法将逻辑包扎起来。 Any help or a push in the right direction is much appreciated.
非常感谢任何帮助或朝正确方向的推动。
The problem is here: 问题在这里:
$listSelector.append('<li>');
// ...
$listSelector.append('<br> Otherdata: '+obj.otherdata+'</li>');
First some theory. 首先是一些理论。 You can't add partial HTML to the document.
您不能将部分HTML添加到文档中。 The web page itself doesn't consist of HTML.
网页本身不包含HTML。 It consists of elements, and HTML is only a markup language that represents those elements and tells the browser how to build them.
它由元素组成,HTML只是表示这些元素并告诉浏览器如何构建它们的标记语言。 Appending an open
<li>
element without closing it doesn't make sense in this perspective: you can't have half of an element in the DOM. 从这个角度看,添加一个打开的
<li>
元素而不关闭它是没有意义的:DOM中不能有一半的元素。
When you have $listSelector.append('<li>')
you're appending an entire <li>
element to the document. 当您有
$listSelector.append('<li>')
您$listSelector.append('<li>')
整个<li>
元素附加到文档中。 It's exactly equivalent to $listSelector.append('<li></li>')
. 它完全等同于
$listSelector.append('<li></li>')
。 When you later have $listSelector.append('<br> Otherdata: '+obj.otherdata+'</li>')
it's exactly equivalent to $listSelector.append('<br> Otherdata: '+obj.otherdata+'<li></li>')
– the browser doesn't "remember" that there was an open <li>
tag earlier so it "fixes" the broken HTML. 当您以后拥有
$listSelector.append('<br> Otherdata: '+obj.otherdata+'</li>')
它完全等同于$listSelector.append('<br> Otherdata: '+obj.otherdata+'<li></li>')
–浏览器不会“记住”之前有一个打开的<li>
标记,因此它“修复”了损坏的HTML。
The extra empty <li>
elements are what cause the layout to look broken. 多余的
<li>
元素是导致布局看起来不完整的原因。
To fix it, first make the <li>
element, then add its contents to it, and then append it to the parent: 要修复此问题,请首先创建
<li>
元素,然后将其内容添加到其中,然后将其附加到父元素中:
link = $('<a href="dashboard.php#companyInfo?'+obj.symbol+'">'+obj.symbol+'</a>').click(function(){
$('.nav-pills a[href=#companyInfo]').tab('show') ;
$('body').scrollTop(0);
$('#companySearchInput').val(obj.symbol);
$('#companySearchButton').click();
return false;
});
$('<li>')
.append(link)
.append('<br> Otherdata: '+obj.otherdata)
.appendTo($listSelector);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.