0

実行可能な答えを見つけることができないような奇妙なものです。おそらく非常に簡単でしょう！

lijqueryを使用して'sをラップしてから絶対に配置する不正なアイテムがいくつかありますulが、それらはすべて同じ位置にあります（互いの上にあります）。

私がする必要があるのはul、以下のように各アイテムをインクリメントするために、より多くのjqueryを使用することです。

<ul class="end"><li>Some text</li></ul> (top:30px;)
<ul class="end"><li>Some text</li></ul> (top:30px; - needs to be 60px)
<ul class="end"><li>Some text</li></ul> (top:30px; - needs to be 90px)

などなど。今、私は通常これを行うためにcssクラスを使用しますが、これらのアイテムは動的に生成され、量が変更/増加する可能性があるため、多くのcssクラスは必要ありません。

jqueryでこれを機能させるにはどうすればよいですposition:relative;かfloat（この場合は使用できません）？

4

3 に答える 3

1

ULのグループ全体を親要素（divなど）でラップし、ラッパーposition:absoluteを指定し、UL自体を指定することをお勧めしposition:relativeます。これは最も堅牢でブラウザ互換のソリューションであり、この状況で行うのが最も一般的なことです。実際、私はそれを自分でやった。

<div class="wrap">
    <ul class="end"><li>Some text</li></ul>
    <ul class="end"><li>Some text</li></ul>
    <ul class="end"><li>Some text</li></ul>
</div>

<style type="text/css">
    .wrap { position:absolute; top:30px; }
    .end { position:relative; }
</style>

何らかの理由でうまくいかない場合は、jQueryを使用してULを反復処理できます。

var currentHeight = 30;
$('ul.end').each(function() {
    $(this).css('top', currentHeight);
    currentHeight += $(this).height();
});

編集：

上記が役に立ったことをうれしく思います！念のため、jQueryはページフローから要素を引き出してラッパー要素に移動することもできます。これは、他の要素の中にある場合でも機能するはずです。

$('ul.end').each(function() { 
    $(this).appendTo('.wrap'); 
});

私はおそらくこのようにするでしょう。

于 2012-10-11T15:52:00.183 に答える
0

これを試して ：

$("ul.end").each(function() {
    $(this).css({
        top : '+=30px'
    });
});
于 2012-10-11T15:51:57.270 に答える
-1

これを実現するためにjQueryは必要ありません..これらの要素にクラスを割り当てるだけです

位置：absoluteを定義し、それらがオーバーラップしているように見える場合、それがデフォルトの機能です。要素をabsoluteに指定すると、その要素はドキュメントフローに含まれず、ビューポートをポイントします。

したがって、意志を与えるtop:"30px" and position:"absolute"と、それらは互いに重なり合うようになります

position:"relative"代わりに使用してみてください

于 2012-10-11T15:46:20.537 に答える