เมธอด add
เมธอด add เพิ่มองค์ประกอบที่กำหนด
ลงในชุดองค์ประกอบที่มีอยู่แล้ว
ไวยากรณ์
การเพิ่มโดยใช้ซีเลกเตอร์:
.add(ซีเลกเตอร์);
องค์ประกอบที่ต้องการเพิ่มถูกกำหนดโดยหนึ่ง หรือหลาย (เป็นอาร์เรย์) DOM องค์ประกอบ:
.add(DOM องค์ประกอบ);
องค์ประกอบที่ต้องการเพิ่มถูกกำหนดโดยอ็อบเจกต์ jQuery:
.add(อ็อบเจกต์ jQuery);
องค์ประกอบที่ต้องการเพิ่มถูกกำหนดโดยข้อความ html:
.add(ข้อความ html);
องค์ประกอบที่ต้องการเพิ่มถูกค้นหาในหน้าเว็บด้วย ซีเลกเตอร์ที่กำหนด ภายในขอบเขต ที่กำหนดโดยพารามิเตอร์ที่สอง ขอบเขตการค้นหาสามารถ ถูกกำหนดโดย DOM องค์ประกอบ อ็อบเจกต์ jQuery หรืออ็อบเจกต์เอกสาร:
.add(ซีเลกเตอร์, คอนเทกซ์);
ตัวอย่าง
เรามาค้นหาหน่วยย่อหน้าทั้งหมด ใส่ข้อความ
'!' ต่อท้าย
จากนั้นเพิ่มหัวข้อ h2
เข้าไปในชุดหน่วยย่อหน้าที่พบ
และกำหนดสีแดงให้กับทั้งหัวข้อและหน่วยย่อหน้าในเวลาเดียวกัน:
<div>ddd</div>
<h1>hhh</h1>
<p>ppp</p>
<div id="test"><h2>hhh</h2></div>
<p>ppp</p>
<h2>hhh</h2>
<p>ppp</p>
$('p').append('!').add('h2').css('color', 'red');
ตัวอย่าง
เรามากำหนดคอนเทกซ์สำหรับการค้นหา - เพิ่มเฉพาะ
h2 ที่อยู่ภายในองค์ประกอบ
#test เท่านั้น:
let $context = $('#test');
$('p').append('!').add('h2', $context).css('color', 'red');
ตัวอย่าง
สร้างคอนเทกซ์การค้นหาในรูปของ DOM องค์ประกอบด้วย
เมธอด JavaScript
querySelector:
let context = document.querySelector('#test');
$('p').append('!').add('h2', context).css('color', 'red');
ตัวอย่าง
ส่วนใหญ่สามารถทำได้โดยไม่ต้องใช้คอนเทกซ์ เพียงแค่สร้างซีเลกเตอร์ที่ซับซ้อนขึ้น:
$('p').append('!').add('#test h2').css('color', 'red');
