Apply changes across the page. Jquery -
i have these lines of jquery code manipulate html
$('#remarks li:gt(1)').wrapall('<ul class="btmrow" />'); $("#btrowmargin").appendto("#remarks"); $('#remarks ul:lt(2)').wrapall('<li class="btmrow" />');
i want above code take effect across page ever #remarks present. wrote
$.each($("#remarks"), function() { $('#remarks li:gt(1)').wrapall('<ul class="btmrow" />'); $("#btrowmargin").appendto("#remarks "); $('#remarks ul:lt(2)').wrapall('<li class="btmrow" />'); });
but doesn't seem working.
originally html looks
<li> <ul id="remarks" class="remarks"> <li class="header soldbkg">showing information</li> <li><p><b>remarks:</b></p></li> <li><span>occupant name</span><span class="data">listing office</span></li> <li><span>occupancy/show</span><span class="data">listing agent</span></li> <li><span>occupant type</span><span class="data">n/a</span></li> <li><span>occupant phone</span><span class="data">n/a</span></li> <li><span>other phone number</span><span class="data">n/a</span></li> </ul> <ul class="btmrow marginfix" id="btmrowmarginfix"> <li></li> <li><span>phone show</span><span class="data">n/a</span></li> <li><span>lockbox location</span><span class="data">n/a</span></li> <li><span>lockbox type</span><span class="data">n/a</span></li> <li><span>showing access</span><span class="data">n/a</span></li> </ul> </li>
after applying jquery html looks :
<li> <ul id="remarks" class="remarks"> <li class="header soldbkg">showing information</li> <li><p><b>remarks:</b></p></li> <li class="btmrow"> <ul class="btmrow"> <li><span>occupant name</span><span class="data">listing office</span></li> <li><span>occupancy/show</span><span class="data">listing agent</span></li> <li><span>occupant type</span><span class="data">n/a</span></li> <li><span>occupant phone</span><span class="data">n/a</span></li> <li><span>other phone number</span><span class="data">n/a</span></li> </ul> </li> </ul> <ul class="btmrow marginfix" id="btmrowmarginfix"> <li></li> <li><span>phone show</span><span class="data">n/a</span></li> <li><span>lockbox location</span><span class="data">n/a</span></li> <li><span>lockbox type</span><span class="data">n/a</span></li> <li><span>showing access</span><span class="data">n/a</span></li> </ul> </li>
but want :
<li> <ul id="remarks" class="remarks"> <li class="header soldbkg">showing information</li> <li><p><b>remarks:</b></p></li> <li class="btmrow"> <ul class="btmrow"> <li><span>occupant name</span><span class="data">listing office</span></li> <li><span>occupancy/show</span><span class="data">listing agent</span></li> <li><span>occupant type</span><span class="data">n/a</span></li> <li><span>occupant phone</span><span class="data">n/a</span></li> <li><span>other phone number</span><span class="data">n/a</span></li> </ul> <ul class="btmrow marginfix" id="btmrowmarginfix"> <li></li> <li><span>phone show</span><span class="data">n/a</span></li> <li><span>lockbox location</span><span class="data">n/a</span></li> <li><span>lockbox type</span><span class="data">n/a</span></li> <li><span>showing access</span><span class="data">n/a</span></li> </ul> </li> </ul> </li>
ok, here liste of misstake.
1: id's must unique, when have jquery selector $('#remarks')
, return 1 element. no loop in each. changing id class make loop.
side note: when looping through jquery element, can use .each()
: $(selector).each(function(){})
. way using arrays or objects.
2: inside .each()
, need use this, else reselecting every element , have no "real controle" :
$('.remarks').each(function(){ var $this = $(this) //caching object optimisation $this.find('li:gt(1)').wrapall('<ul class="btmrow" />'); //this line has change, see point 3 $this.find('ul:lt(2)').wrapall('<li class="btmrow" />'); })
3: guess, line :
$("#btrowmargin").appendto('#remarks');
will have change. you'll probly need use dom traversal function can't tell since don't have access dom. finish .appendto($this)
.
$this.siblings('.bottomrow.marginfix').appendto($this.find('li :eq(2)'));
Comments
Post a Comment