Question

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>');         
});

使用上面的代码我正在尝试将列表项添加到包含我为其设计的自定义行为的链接的列表中。这种行为是有效的，除了在每个.append（）调用发生的页面上有一个换行符。我希望列表项显示为一条连续的行。我尝试使用.wrap（）和.wrapInner（），但这些似乎替换了列表项的整个innerHTML。老实说，我知道他们可能是解决方案，但我似乎无法绕过逻辑。非常感谢任何帮助或推动正确的方向。

Answer 1

问题在于：

$listSelector.append('<li>');
// ...
$listSelector.append('<br> Otherdata: '+obj.otherdata+'</li>');

首先是一些理论。您无法将部分HTML添加到文档中。网页本身不包含HTML。它由元素组成，HTML只是一种表示这些元素的标记语言，并告诉浏览器如何构建它们。在没有关闭它的情况下附加一个开放的<li>元素在这个角度来看没有意义：你不能在DOM中拥有一半的元素。

当您$listSelector.append('<li>')时，您将整个<li>元素附加到文档中。它完全等同于$listSelector.append('<li></li>')。如果您稍后$listSelector.append('<br> Otherdata: '+obj.otherdata+'</li>')它完全等同于$listSelector.append('<br> Otherdata: '+obj.otherdata+'<li></li>') - 浏览器不会“记住”之前有一个打开的<li>标记，以便“修复”损坏的HTML。

额外的空<li>元素是导致布局看起来破碎的原因。

要修复它，首先制作<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);

需要在没有.append（）

1 个答案: