2

私はこのdiv要素を持っています

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

結果は次のとおりです。 ここに画像の説明を入力

しかし、lijquery から要素を追加すると、結果は次のようになります。 ここに画像の説明を入力

なぜ左側にパディングがあり、それを解決する方法を教えてください。

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

の HTMLfoodsSection ulを別の で設定していますul。例えば

$(".foodsSection ul")どちらがul要素かを選択しています。次に、その中に HTML を別の .xml で設定しますul。

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

これにより、2 倍の量のパディングが発生し、HTML マークアップも正しくありません。あるブラウザーでは (ダブル パディングのために) 正しく表示されない場合がありますが、他のブラウザーでは HTML が壊れているため、表示が悪化する可能性があります。

あなたができることは.html(lis)、コード行を次のように置き換えることです。.replaceWith(lis)このメソッドについてここで読むことができます.replaceWith()

于 2013-03-18T14:02:47.893 に答える
1

マークアップに1 秒を追加しul、css スタイルを継承していますul(100px の余白)。

それ以外の

.foodsSection ul

試す

.foodsSection > ul
于 2013-03-18T14:06:11.633 に答える
1

スクリプトから余分なものを追加<ul>しています。で li の目的地を既に取得していvar foodDive = $(".foodsSection ul");ます。var lis = '<ul>';したがって、その2番目と終了も必要ありませんlis+='</ul>'。ただvar lis = '';代わりに。

于 2013-03-18T14:04:36.247 に答える
1

ulこれは、現在のに別の要素を追加しているためですul。要素を置き換えるか、要素ulのみを追加することができますli。

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

これは、コードを ul 要素に追加していて、次の 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 に答える