1

私はこの質問が答えられたことを知っていますが、私はまだ私の特定の状況のた​​めに助けが必要です

私は持っています

<ul>
<li>blah blah</li>
<li>blah blah blah</li>
</ul>

私は各liの後にdivを挿入することができました

$('<div class="shadow-hide"></div>') .appendTo('div#main nav.left ul li');

これで、htmlは

<ul>
  <li>blah blah</li>
  <div class='shadow-hide'></div>
  <li>blah blah blah</li>
  <div class='shadow-hide'></div>
</ul>

しかし、divの高さをその前のliの高さに一致するように設定するにはどうすればよいですか？

これまでの私の試みですが、最初のliの高さを取得していると思います。

$('<div class="shadow-hide"></div>') .appendTo('div#main nav.left ul li');
    var liHeight = $("div#main nav.left ul li").height();
    $('div.shadow-hide').css('height', liHeight);
4

3 に答える 3

2

多分：

$('.shadow-hide').height(function() {
   return $(this).prev('li').height();
});

または、実際のユースケースに沿ったものになるかもしれません:

$('#main nav.left ul li').each(function(i, el) {
  var $el = $(el), height = $el.height();
  $('<div class="shadow-hide" />').height(height).appendTo($el);
});

編集: コメントに記載されているように、div をリストに直接ネストすることはできないため、これをスタイリングする方法を再考し、おそらく「シャドウ非表示」div をリスト項目に置き換えることをお勧めします。

于 2011-08-19T00:21:13.647 に答える
1

どちらも を使用して簡潔かつ効率的に実行できます.append(function(index, html)。これは、このシナリオではより理にかなっていると思います。

var div = '<div class="shadow-hide">Test</div>';

$("ul li").append(function(index, html) {
    return html + ($(div).height($(this).height()).html());
});

デモ。

于 2011-08-19T00:39:26.077 に答える
1

$('<div class="shadow-hide"></div>') .appendTo('div#main nav.left ul li');この行は、各 li 内に div を追加します。しかし、あなたが示したマークアップは間違っています.divは各liの中に入る必要があります.

以下のスクリプトを試して、各 li 内の shadow-hide div の高さを設定できます。

$("div#main nav.left ul li").each(function(){
   $(this).find(".shadow-hide").height($(this).height());
}):;
于 2011-08-19T00:23:51.550 に答える