ホームページ > ウェブフロントエンド > jsチュートリアル > jQueryを使用してname属性が空ではない要素を見つけるにはどうすればよいですか?

jQueryを使用してname属性が空ではない要素を見つけるにはどうすればよいですか?

PHPz
リリース: 2024-02-27 21:15:04
オリジナル
921 人が閲覧しました

jQueryを使用してname属性が空ではない要素を見つけるにはどうすればよいですか?

jQuery を使用して name 属性が空ではない要素を見つけるにはどうすればよいですか?

Web ページを作成するときは、Web ページの要素を操作する必要があることが多く、場合によっては属性に基づいて特定の要素をフィルタリングする必要があります。 jQueryを使うとセレクターを通じて条件に合う要素を簡単に見つけることができます。この記事では、jQuery を使用して特定の属性を持つ要素を検索する方法とコード例を詳しく説明します。

まず、要件を明確にする必要があります。name 属性が空ではない要素を見つけます。次に、jQuery の属性セレクターを使用して、このタスクを実行できます。属性セレクターは角括弧 [] で表され、要素は角括弧内で属性とそれに対応する値を指定することで検索できます。

具体的なコード例は次のとおりです。

<!-- HTML结构 -->
<div name="test1">元素1</div>
<div name="">元素2</div>
<div>元素3</div>
<div name="test2">元素4</div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    // 使用属性选择器查找name属性不为空的元素
    var elementsWithName = $('[name]:not([name=""])');
    
    // 遍历找到的元素并输出其内容
    elementsWithName.each(function(){
        console.log($(this).text());
    });
});
</script>
ログイン後にコピー

上記のコードでは、最初に 4 つの div 要素を含む HTML 構造を定義します。その一部には name 属性があります。次に、jQuery ライブラリを導入し、ドキュメントの準備ができたらコードを実行します。コードでは、属性セレクター [name]:not([name=""]) を使用して、name 属性を持つ要素を検索し、name 属性が空ではなく、それを ## に保存します。 #elementsWithName 変数。

次に、

each メソッドを使用してこれらの要素を走査し、$(this).text() を通じて各要素のテキスト コンテンツを取得します。 console.logを通じてコン​​ソールに出力します。

上記のコード例を通じて、jQuery を使用して空ではない name 属性を持つ要素を見つけることに成功し、これらの要素をさらに操作してニーズを達成できます。 jQuery のセレクター機能は強力かつ柔軟であり、操作する必要がある要素を迅速かつ正確に特定し、開発効率を向上させるのに役立ちます。

以上がjQueryを使用してname属性が空ではない要素を見つけるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート