jqueryのコンテンツフィルタリングセレクタの詳細解説 selector_jquery

まず、DOM 要素の HTML 構造を記述します:

コードをコピーします コードは次のとおりです:

<style type="text/css">
/*ハイライト*/
.highlight{
背景色: グレー
}
</style>

コードをコピー コードは次のとおりです:

<div>John辞任

ジョージ・マーティン

マルコム・ジョン・シンクレア

J・オーン

;div>

1. :contains(text)

テキストコンテンツ「text」を持つ要素を選択しますコードをコピーします

コードは次のとおりです:

$("div:contains('John')").addClass("highlight") //「John」を含むすべての div 要素を検索します


2. :empty

子要素やテキストを含まない空の要素を選択しますChrome ブラウザを使用して要素を検査し、空の div のクラス スタイルが変更されていることがわかりますコードをコピー

コードは次のとおりです:

$("div:empty").addClass("highlight ");


3. :has(セレクター)

セレクターで一致した要素を含む要素を選択します コードをコピーします

コードは次のとおりです:

$("div:has(p)").addClass("highlight") ; // p を含むすべての div 要素を検索します



4. :parent

子要素またはテキストを含む要素タグを選択 コードをコピー

コードは次のとおりです:

$("div:parent").addClass("highlight") //子要素またはテキストを含むすべての div 要素を検索します