jQuery 兄弟ノードの使用に関するヒントを共有する-jsチュートリアル-php.cn

jQuery 兄弟ノードの使用に関するヒントを共有する

PHPz

リリース： 2024-02-27 12:45:03

オリジナル

661 人が閲覧しました

jQuery 兄弟ノードの使用に関するヒントを共有する

jQuery は、Web 開発で広く使用されている人気のある JavaScript ライブラリです。フロントエンド開発プロセスでは、DOM 要素の操作が含まれることが多く、jQuery はこれらの操作を簡素化するためのメソッドを豊富に提供します。この記事では、jQuery で兄弟ノードを操作するテクニックに焦点を当て、兄弟ノードの検索や兄弟ノードのフィルタリングなどの具体的な使用方法をコード例とともに詳しく説明します。

1. 兄弟ノードの検索

jQuery では、兄弟セレクターを使用して、隣接する兄弟ノードを簡単に見つけることができます。兄弟セレクターはシンプルで使いやすく、特定の構文を使用してターゲット要素の兄弟ノードを簡単に見つけることができます。たとえば、次の兄弟ノードと前の兄弟ノードは、それぞれ .next() メソッドと .prev() メソッドを使用して選択できます。

// 选择下一个兄弟节点
$('selector').next();

// 选择上一个兄弟节点
$('selector').prev();

ログイン後にコピー

2. 特定のタイプの兄弟ノードをフィルタリングする

場合によっては、特定の条件に基づいて特定のタイプの兄弟ノードをフィルタリングする必要があり、これには jQuery が提供するフィルタリングメソッドを使用する必要があります。たとえば、.siblings() メソッドを使用してすべての兄弟ノードを選択し、条件を満たす兄弟ノードをフィルターで除外するセレクターを追加できます。

// 筛选class为example的兄弟节点
$('selector').siblings('.example');

// 筛选具有特定属性的兄弟节点
$('selector').siblings('[data-type="value"]');

ログイン後にコピー

3. 兄弟ノードのプロパティとコンテンツを操作する

兄弟ノードを見つけるだけでなく、jQuery を使用して兄弟ノードのプロパティとコンテンツを簡単に操作することもできます。 .attr() メソッドを使用すると、兄弟ノードの属性値を取得または設定できます。一方、.html() および .text()メソッドは、兄弟ノードの HTML コンテンツとテキストコンテンツを取得または設定できます。

// 获取兄弟节点的属性值
$('selector').next().attr('attributeName');

// 设置兄弟节点的属性值
$('selector').next().attr('attributeName', 'attributeValue');

// 获取兄弟节点的HTML内容
$('selector').next().html();

// 设置兄弟节点的HTML内容
$('selector').next().html('<p>New HTML content</p>');

// 获取兄弟节点的文本内容
$('selector').next().text();

// 设置兄弟节点的文本内容
$('selector').next().text('New text content');

ログイン後にコピー

4. サンプルアプリケーション: インタラクティブな拡張メニュー

次は、兄弟ノードを使用してインタラクティブな拡張メニューを作成する方法を示す簡単な例です。メニュー項目をクリックすると、このメニュー項目の下のサブメニューが展開され、他のメニュー項目の下のサブメニューは折りたたまれます。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Dropdown Menu</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<ul class="menu">
  <li class="menu-item">
    Menu 1
    <ul class="submenu">
      <li>Submenu 1</li>
      <li>Submenu 2</li>
    </ul>
  </li>
  <li class="menu-item">
    Menu 2
    <ul class="submenu">
      <li>Submenu 3</li>
      <li>Submenu 4</li>
    </ul>
  </li>
</ul>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$('.menu-item').click(function() {
  $(this).siblings().find('.submenu').slideUp();
  $(this).find('.submenu').slideToggle();
});
</script>
</body>
</html>

ログイン後にコピー

上の例では、.menu-item をクリックすると、他のメニュー項目の下のサブメニューが折りたたまれ、現在のメニュー項目の下のサブメニューが展開され、これにより、メニューをインタラクティブに展開する効果。

上記の紹介を通じて、jQuery での兄弟ノード操作の一般的な手法について学び、これらの手法を実際に適用する方法を例を通して示しました。フロントエンド開発では、これらのスキルを習得すると、開発者が DOM 要素をより効率的に操作し、より柔軟でインタラクティブなページ効果を実現できるようになります。この記事がお役に立てば幸いです。

以上がjQuery 兄弟ノードの使用に関するヒントを共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。