Theory
એકતાળીસમો event ચાલુ કાર્યક્રમે આવી ચડે છે
ઉત્સવ અધવચ્ચે હોય ત્યાં સમિતિ એક અણધાર્યો event ઉમેરે છે: Antakshari Finals. Page તો 200 વિદ્યાર્થીઓનાં browsers માં ક્યારનું load થઈ ચૂક્યું છે; એટલે યાદીમાં નવું card અત્યારે જ, script વડે અને reload વગર ઊગવું જોઈએ.
ગયા પાઠના setters આ કરી શકતા નથી: text() અને html() તો element જે સાચવે છે એની જગ્યાએ નવું મૂકી દે છે. આજની methods અંદર ઉમેરે છે: જે પહેલેથી છે એની અંદર, એની પહેલાં, એની પછી અને એની આસપાસ નવું content મૂકે છે. પાંચ methods, અને આખી ચાવી એ જાણવામાં છે કે દરેક method element ની કઈ બાજુએ ઊતરે છે.
Theory
ખોખાની અંદર, કે એની બાજુમાં?
Event ના card ને છાજલી પર પડેલા ખોખા તરીકે વિચારો.
append એક ચિઠ્ઠી ખોખાની અંદર, એની સામગ્રીની સૌથી નીચે નાખે છે; prepend એ જ ચિઠ્ઠી છેક ઉપર નાખે છે. ખોખાની અંદરની સામગ્રી વધી.
before છાજલી પર એની ડાબી બાજુએ નવું ખોખું મૂકે છે; after જમણી બાજુએ. છાજલી વધી, પણ ખોખું અડ્યા વગરનું જ રહ્યું.
wrap ખોખાને ઊંચકીને એના પોતાના મોટા ભેટના ખોખામાં મૂકી દે છે. અંદર, બાજુમાં અને આસપાસ: આખા પાઠનો નકશો આટલો જ છે.
At a glance
ઉમેરવાની 5 methods
| Method | નવું content ક્યાં ઊતરે છે | FestConnect માં ઉપયોગ |
|---|---|---|
| append(c) | અંદર, છેલ્લા child તરીકે | યાદીના છેડે નવું card |
| prepend(c) | અંદર, પહેલા child તરીકે | Card ની ટોચે NEW નું ચિહ્ન |
| before(c) | બહાર, આગળના પડોશી તરીકે | Card ની ઉપર sold-out ની પટ્ટી |
| after(c) | બહાર, પછીના પડોશી તરીકે | Card ની નીચે sponsor ની પટ્ટી |
| wrap(c) | આસપાસ: દરેક મળતા આવતાને પોતાનું નવું parent મળે છે | દરેક ખાસ card માટે અલગ highlight ની ફ્રેમ |
Practical
યાદી જીવતેજીવ વધે છે (આખું page)
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function() {
$("#addBtn").click(function() {
$("#eventList").append( // અંદર, છેડે
"<li class='card'>Antakshari Finals</li>");
$("li:last").prepend("<b>NEW </b>"); // એ card ની અંદર, શરૂઆતમાં
$("#garba").before( // બહાર, ઉપરની બાજુ
"<p class='soldout'>SOLD OUT</p>");
$(".featured").wrap( // દરેક મળતા આવતાની આસપાસ
"<div class='highlight'></div>");
});
});
</script>
</head>
<body>
<button id="addBtn">Committee update</button>
<ul id="eventList">
<li id="garba" class="card featured">Garba Night</li>
<li class="card">Coding Contest</li>
<li class="card featured">Robo Race</li>
</ul>
</body>
</html>
This example runs in Gri-Learn on the web, where you can edit it and see the output.
Quiz
$("#garba").append(x) અને $("#garba").after(x) વચ્ચે શો ફરક છે?
- કશો નહીં: બંને x ને #garba ના છેડે ઉમેરે છે
- append x ને #garba ની અંદર એના છેલ્લા child તરીકે મૂકે છે; after x ને એની બહાર, એના પછીના પડોશી તરીકે મૂકે છે
- append શરૂઆતમાં ઉમેરે છે, after છેડે ઉમેરે છે
- after એ #garba ના પછીના પડોશીની જગ્યા લે છે; append એના content ની જગ્યા લે છે
Show the answer
append x ને #garba ની અંદર એના છેલ્લા child તરીકે મૂકે છે; after x ને એની બહાર, એના પછીના પડોશી તરીકે મૂકે છે
સીમા એ છે element નું પોતાનું બંધ કરતું tag: append એની બરાબર અંદરની બાજુએ ઊતરે છે (card નું content વધે છે), જ્યારે after એની બરાબર બહારની બાજુએ ઊતરે છે (યાદીમાં card ની બાજુમાં નવું ઘટક ઊગે છે). સાદા layouts માં જોવામાં બંને સરખાં લાગે, પણ રચનામાં જુદાં પડે છે, અને રચના જ નક્કી કરે છે કે styles નો વારસો કઈ રીતે ઊતરે અને DOM ના વૃક્ષમાં કોણ કોની અંદર રહે. વિકલ્પ C એક બાજુ append ને prepend સાથે ગૂંચવે છે અને બીજી બાજુ after ને એવી કોઈ વસ્તુ સાથે જે છે જ નહીં. વિકલ્પ D જગ્યા લેવાની વાત ચોરીછૂપીથી ઘુસાડે છે: આજની દરેક method ઉમેરે છે; પહેલેથી હાજર કશાને એ અડતી નથી. અંદર સામે બહાર, એ જ એક ભેદ છે જેના પર આ આખા કુટુંબની પરીક્ષા લેવાય છે.
Think first
કેટલાં highlight વાળાં ખોખાં?
ઉપરનું listing $(".featured").wrap("<div class='highlight'></div>") ચલાવે છે, અને એમાં 2 featured cards મળતાં આવે છે. Tap કરતાં પહેલાં કહો: jQuery એક જ highlight વાળું div બનાવે છે જેમાં બંને cards સમાય, કે પછી કશુંક બીજું?
Show the answer
બે અલગ અલગ divs: wrap દરેક મળતા આવતા element ને wrapper ની પોતાની નકલ આપે છે, એટલે દરેક featured card પોતાની અંગત highlight વાળી ફ્રેમમાં બેસે છે, ભલે એ યાદીમાં ગમે ત્યાં હોય. (આખા જૂથની આસપાસ એક જ સહિયારું ખોખું જોઈએ તો એ જુદી method છે, wrapAll, જે આ અભ્યાસક્રમની બહાર છે પણ હાંસિયામાં નોંધવા જેવી છે.)
દરેક element દીઠ ચાલતું આ વર્તન આખા unit સાથે સુસંગત છે: અનેક elements વાળી પસંદગીમાં ક્રિયા દરેક મળતા આવતા પર અલગ અલગ લાગુ પડે છે: 2 cards એટલે 2 wraps, બરાબર એ જ રીતે જેમ 20 cards એટલે 20 click handlers.
Watch out
ઉમેરનારા કુટુંબની ઝીણી શરતો
text() અહીં બંધબેસતું નથી: slug માં એનું નામ છે ખરું, પણ text("x") તો content ની જગ્યા લઈ લે છે (ગયો પાઠ); એ બાજુમાં કશું ઉમેરતું નથી. એને આ યાદીના અજાણ્યા મહેમાન તરીકે ઓળખો.
ખોટા parent માં append કરવું: $("#eventList li").append(card) લખો તો દરેક હયાત li ની અંદર એક card મુકાઈ જાય; નવા list ના ઘટકનું parent તો ul પોતે છે.
Strings ખરેખરાં elements બની જાય છે: એક વાર append થયા પછી નવું li એ DOM નું પૂરેપૂરું નાગરિક છે: પસંદ કરી શકાય, click થઈ શકે, અને એના પર effects પણ ચાલે, બરાબર HTML માં જ જન્મેલા એના પડોશીઓની જેમ.
Theory
Feeds આ જ રીતે ચાલે છે
તમે વાપરેલો દરેક infinite scroll, દરેક chat નું બારું અને દરેક જીવંત scoreboard એ આ જ પાઠ છે, બસ loop માં: data આવે છે, string બંધાય છે, append ચાલે છે, અને page વધે છે. Unit 4 માં આવતો data server પરથી AJAX વડે આવશે, અને handler ની છેલ્લી લીટી બરાબર આજનું append જ હશે. Manipulation નો સરંજામ પૂરો કરવા એક કુટુંબ બાકી છે: વસ્તુઓ બહાર કાઢવાનું, એટલે કે remove, empty અને unwrap, અને એ જ હવે પછી.
Summary
Key takeaways
- અંદર: append (છેલ્લું child) અને prepend (પહેલું child) element નું content વધારે છે.
- બહાર: before (આગળનો પડોશી) અને after (પછીનો પડોશી) એની આસપાસનું layout વધારે છે.
- wrap દરેક મળતા આવતા element ને એનું પોતાનું નવું parent આપે છે; 2 મળે તો 2 wrappers.
- ઉમેરાયેલી HTML strings ખરેખરાં અને પૂરેપૂરાં પસંદ કરી શકાય એવાં DOM elements બની જાય છે.
- text() ઉમેરવાને બદલે જગ્યા લઈ લે છે: એ get અને set વાળા કુટુંબનું છે.
- અનેક elements વાળી પસંદગીમાં દરેક મળતા આવતા પર ઉમેરો થાય છે.
- યાદ રાખવાની કડી: append અને prepend ખોખું ભરે છે, before અને after છાજલી લંબાવે છે, અને wrap ભેટનું ખોખું ચડાવે છે.