2

我有这个 div 元素

<div class="foodsSection">
    <label>
        Foods:
    </label>
    <ul>
        <li>
            here
        </li>  
    </ul>
</div>

结果是： 在此处输入图像描述

但是当我li从 jquery 添加元素时，结果变成了这样： 在此处输入图像描述

为什么要向左填充以及如何解决？

jQuery

$(document).ready(function(){
    $("..RestauranstSection li").click(function (){
        var divYourOrder = $(".YourOrder");
        var li = $(".OMRestaurants li");
        var restaurantID = 8;
        var foodDive = $(".foodsSection ul");
        foodDive.html("");
        var lis = '<ul>';
        $.getJSON("http://localhost/TheEatTel/Food/getFoodForRestaurant/"+restaurantID+"/TRUE",function(data){
            for(var i=0;i<data.length;i=i+2){
                lis +="<li>"+"<label>"+data[i]+"</label> <label>"+data[i+1]+"</label></li>";
            }
            lis+="</ul>";
            foodDive.html(lis);    
        });
    });
});

css

.foodsSection{
    width: 50%;
    margin-left: 100px;
    margin-top: 20px;
    border: black solid 2px;
}
.foodsSection label{
    width: 100px;
    color: blue;
}
.foodsSection ul{
    margin-bottom: 0px;
    margin-right: 0px;
    margin-top: 10px;
    margin-left: 100px;
    padding: 0;
}
.foodsSection ul li{
    font-size: 18px;
    padding: 0px;
    margin: 0px;
    list-style: none;
}
.foodsSection ul li:hover{
    background-color: #ccccff;
}
4

5 回答 5

4

您正在将 的 HTML 设置为foodsSection ul另一个ul. 例如

您正在选择$(".foodsSection ul")哪个是ul元素。然后将其中的 HTML 设置为另一个ul.

<div class="foodsSection">
    <label>
        Foods:
    </label>
    <ul>
        <ul>
         .
         .
         .
         </ul>
     </ul>
 </div>

这将导致两倍的填充量，也是不正确的 HTML 标记。它在一个浏览器中可能看起来不正确（由于双填充），但由于 HTML 损坏，其他浏览器看起来会更糟。

您可以做的是将您.html(lis)的代码行替换为.replaceWith(lis)您可以在此处阅读有关此方法的信息.replaceWith()

于 2013-03-18T14:02:47.893 回答
1

那是因为您将另一个ul元素附加到当前的ul. 您可以替换ul或仅附加li元素。

foodDive.replaceWith(lis);
于 2013-03-18T14:02:22.253 回答
1

这是因为您将代码添加到 ul 元素，并且它包含一个 nexted ul。Firefox 开发人员工具栏有一个“查看生成的源代码”按钮，对此很有用。

试试这个：

$(document).ready(function(){
    $("..RestauranstSection li").click(function (){
        var divYourOrder = $(".YourOrder");
        var li = $(".OMRestaurants li");
        var restaurantID = 8;
        var foodDive = $(".foodsSection ul");
        foodDive.html("");
        var lis = '';
        $.getJSON("http://localhost/TheEatTel/Food/getFoodForRestaurant/"+restaurantID+"/TRUE",function(data){
            for(var i=0;i<data.length;i=i+2){
                lis +="<li>"+"<label>"+data[i]+"</label> <label>"+data[i+1]+"</label></li>";
            }
            foodDive.html(lis);    
        });
    });
});
于 2013-03-18T14:02:39.440 回答
1

您正在<ul>从脚本中添加额外内容。您已经获得了 li 的目的地var foodDive = $(".foodsSection ul");。因此，您也不需要第二次var lis = '<ul>';关闭lis+='</ul>'。只是var lis = '';相反。

于 2013-03-18T14:04:36.247 回答
1

您正在为您的标记添加一秒钟ul，它正在继承您的 css 样式ul（左边距为 100px）。

代替

.foodsSection ul

尝试

.foodsSection > ul
于 2013-03-18T14:06:11.633 回答