web-dev-qa-db-ja.com

：tbodyタグの空のセレクター

次の表があるとします。

<table id="incidents">
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

JQueryを使用すると、次のようにfalseとして評価されます。

$("#incidents tbody").is(":empty")

CSSを使用して、コンテンツをメッセージに設定したいと思います。

#incidents tbody:empty {
    content: "<tr>message foo</tr>";
}

:emptyセレクターはtbodyに適用されますか？

jqueryhtmlcssjquery-selectorscss-selectors
9
Darbio

いいえ、残念ながら、tbody内のインデントと改行により、この場合は_:empty_と一致しなくなります。これは、 [〜＃〜] css [〜＃〜] と jQuery の両方に当てはまります。ここで、私が知る限り、_:empty_は、jQueryと同様に同じように動作します。 _:parent_ 、これは:not(:empty)と同等です（very名前の選択が不適切です）。

さらに、 CSS contentを使用してDOMに要素を追加することはできません 。これはjQueryまたはサーバー側で行う必要があります。tbodyに行があるかどうかを確認し、ない場合はその行を追加します。

JQueryを使用する場合は、次を使用できます。

_var tbody = $("#incidents tbody");

if (tbody.children().length == 0) {
    tbody.html("<tr>message foo</tr>");
}
_
22
BoltClock

この場合、tbodyにはコンテンツとして空白が含まれているため、機能しません

：empty

：empty疑似クラスは、子がまったくない要素を表します。要素ノードとテキスト（空白を含む）のみが考慮されます。コメントまたは処理命令は、要素が空であると見なされるかどうかには影響しません。

また、 ：content は ：before または ：after 疑似要素でのみ使用できます

Content CSSプロパティは、:: beforeおよび:: after疑似要素とともに使用され、要素にコンテンツを生成します。 contentプロパティを使用して挿入されたオブジェクトは、匿名で置き換えられた要素です。

3
Arun P Johny

_:empty_を使用する場合は、次のようなtbody構文を指定する必要があります。

_<tbody></tbody>
_

定義したように、：emptyは新しい行があるため、それをチェックしません。

私があなたに言ったようにtbodyを定義してください。 .html()を使用して条件を確認することもできます。

_if(!$("#incidents tbody").html()) {}
_

参照： jQueryを使用してHTML要素が空かどうかを確認するにはどうすればよいですか？

2
Code Lღver

<tbody>には空白が含まれているため、空ではありません。これを回避するには、フィルタリング関数を使用する必要があります。

$("#incidents tbody").filter(function() {
    return !$.trim($(this).text());
}).append('<tr>message foo</tr>');

または子供の数を数えます：

$("#incidents tbody").filter(function() {
    return !$(this).children().length;
}).append('<tr>message foo</tr>');
2
Blender

参考：次のjQueryセレクターを使用すると、テーブル要素のIDに依存せずに、tbodyが空のテーブルを選択できます。

$("table:not(:has(>tbody>tr))")
1
Niels R.

使用する

$("#incidents tbody").html()

そして、あなたが得るものをチェックします。

0
kul_mi