jQueryトラバーサルadd()メソッド

jQuery はコレクションオブジェクトです。$() メソッドを通じて指定された要素のコレクションを見つけた後、一連の操作を実行できます。 $() の後は、コレクションオブジェクトがすでに決定されていることを意味します。後でこのコレクションに新しい要素を追加する必要がある場合はどうすればよいでしょうか。 jQuery は、新しい jQuery オブジェクトを作成するために使用される、このための add メソッドを提供します。、要素は一致する要素のセットに追加されます

.add() の引数は、jQuery セレクター式、DOM 要素、または HTML フラグメント参照を含む、ほぼすべての $() を受け入れることができます。

ケースを簡単に見てみましょう:

操作: すべての li 要素を選択し、p 要素を li コレクションに追加します

<ul>
<li>list item 1</li>
< ;li> ;リスト項目 3</li>
</ul>
<p>新しい p 要素</p>

処理 1: セレクターを渡す

$('li').add( 'p')

プロセス 2: dom 要素を渡す

$('li').add(document.getElementsByTagName('p')[0])

もう 1 つの方法は、コレクションに追加する P タグを動的に作成してから、指定した位置に挿入しますが、要素自体の配置が変わります

$('li').add('<p>New p element</p>').appendTo(target location)

りー

次のセクション

新しいファイル

<!DOCTYPE html>
<html>

<head>
 <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
 <title></title>
 <style>
 .left {
 width: auto;
 height: 150px;
 }
 
 .left div {
 width: 150px;
 height: 120px;
 padding: 5px;
 margin: 5px;
 float: left;
 background: #bbffaa;
 border: 1px solid #ccc;
 }
 </style>
 <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
 <h2>add方法()</h2>
 <div class="left first-div">
 <div class="div">
 <ul>
 <li>list item 1</li>
 <li>list item 2</li>
 <li>list item 3</li>
 </ul>
 <p>新的p元素</p>
 </div>
 </div>
 <div class="right"></div>
 <br/>
 <button>点击：add传递元素标签</button>
 <button>点击：add传递html结构</button>
 <script type="text/javascript">
 $("button:first").click(function() {
 //把p元素添加到li的合集中
 $('li').add('p').css('background', 'red')
 })
 </script>
 <script type="text/javascript">
 $("button:last").click(function() {
 //把html结构'<p>新的p元素</p>'
 //加入到li的合集中，为了能够在页面上显示
 //需要再重新appendTo到指定的节点处
 //值得注意：整个结构位置都改变了
 $('li').add('<p>新的p元素</p>').appendTo($('.right'))
 })
 </script>
</body>

</html>

提出するリセットコード

自動運転

全画面表示