web-dev-qa-db-ja.com

IE8でdivの最後の子を取得しますか？

少なくともIE8では機能しないdiv:last-childを使用する以外に、div要素の最後の子を取得する別の方法はありますか？

javascriptjquerycssinternet-explorer-8css-selectors
19
zsharp

JQueryでは簡単です。

$("div :last-child")

純粋なCSSではそれを行うことはできません。

そうしないと、JavascriptでDOMをトラバースすることに固執します。

違いにも注意してください。

  • "div :last-child"：divの最後の子すべて。そして
  • "div:last-child"：is最後の子であるすべてのdiv。
55
cletus

残念ながら、（あなたが述べたように）IEで失敗する：last-childを使用せずにCSSでこれを行う方法を私は知りません。

Javascriptについて話している場合は、Node.lastChildを使用して可能です。

var div = document.getElementById("mydiv");
var lastChild = div.lastChild;
21
Daniel Lew

JQueryを使用して、適切な要素を見つけます。$("div:last-child").addClass("last-child");

次に、CSSを使用してプレゼンテーションを指定します。div .last-child { /* your rules */ }

6
Mark Hurd

プログラムでクラス「last」を割り当てて選択するか、javascriptを使用できます。また、Microsoftのいくつかを使用してショットを撮ることもできますIE cssスクリプトのものだけです。しかし、私はそれらについてあまり知りません。また、それをオプションとは見なしません。

4
TomHastjarjanto

これを純粋なJavaScriptで行うには、ターゲット要素のlastChildからノードをループバックします。 HTMLに空白がある場合、lastChildはテキストノードである可能性があるため、要素ノードが見つかるまで（ノードタイプ1）、またはノードがなくなるまで（previousSiblingはnullを返します）ループします。

たとえば、ページの最後の要素を見つけるために、本文のlastChildからループバックします。

var targetElement = document.getElementsByTagName("body")[0],
    lastChildElement = targetElement.lastChild;

while (lastChildElement && lastChildElement.nodeType !== 1) {
    lastChildElement = lastChildElement.previousSibling;
}

if (lastChildElement) {
    // Do something
}

本体内に要素がない場合、lastChildElementはこのループをnullとして終了します。

3
Jon Gibbins

箱から出して$（ "div：last-child"）を絶対に使用したくない場合があります。注意すべき重要な点の1つは、これはその呼び出し後のDOMへの変更に対応しないということです-例：最後の子として新しい要素が追加された場合は、更新する必要があります。以前の呼び出しを繰り返す場合だけではありません。前の最後の子に対する最初の呼び出しを元に戻す必要があります。

漠然と動的なことをしている場合は、これに注意してください。 CSS疑似クラスは間違いなく優れたソリューションであり、IEでのサポートがひどく不足しているだけです。あなたのデザインがIEでの最後の子のサポートの喪失に対処でき、プログレッシブエンリッチメントを使用している場合は、JSよりもCSSアプローチを強くお勧めします。

2
Bobby Jack

早送り>> 4年後（2013）
CSS v3（​​CSS3）で可能になり、すべての主要なブラウザーでサポートされています（IEは> =バージョン9）。
IE <=バージョン8で時間を遡る場合、jQueryバージョン<1 .xはあなたを分類します（他の答えが指摘しているように）。
続きを読む http://www.w3schools.com/cssref/sel_last-child.asp

1
mrmoje