jquery - Difficulty with integrating with given css -
a css has been provided me ,i trying integrtae put code in css .
this css
<div data-role="collapsible"> <h3>popcorn</h3> <div class="prd-items-detials"> <ul> <li class="head"> <form> <input type="checkbox" name="checkbox-mini-0" id="checkbox-mini-0" data-mini="true"> <label for="checkbox-mini-0">small pack 150g</label> </form> </li> <li class="prd-items-qt"> <div class="col"> <i class="minus"></i> <i class="qt">12</i> <i class="plus"></i> </div> <div class="col"> </div> <div class="col"> rs: 150/- </div> </li> </ul> </div> </div>
this image how looking .
i tried achive same using
activateuihtml.append('<div data-role="collapsible">'); activateuihtml.append('<div>popcorn</div>'); activateuihtml.append('<div class="prd-items-detials">'); activateuihtml.append('<ul>'); activateuihtml.append('<li class="head">'); activateuihtml.append('<form>'); activateuihtml.append('<input type="checkbox" name="popcorn" id="popcorn" data-mini="true">'); activateuihtml.append('<label for="checkbox-mini-0">popcorn</label>'); activateuihtml.append('</form>'); activateuihtml.append('</li>'); activateuihtml.append('<li class="prd-items-qt">'); activateuihtml.append('<div class="col">'); activateuihtml.append('<i class="minus"></i>'); activateuihtml.append('<i class="qt">12</i>'); activateuihtml.append('<i class="plus"></i>'); activateuihtml.append('</div>'); activateuihtml.append('<div class="col">150</div>'); activateuihtml.append('</li>'); activateuihtml.append('</ul>'); activateuihtml.append('</div>'); activateuihtml.append('</div>'); activateuihtml.append(activateuihtml) ;
but appears way
could please let me know how build dynamically ??
when append single <div>
browser closes automatically breaks html.
if want it, create this:
activateuihtml.append('<div data-role="collapsible"><h3>popcorn</h3><div class="prd-items-detials"><ul><li class="head"><form><input type="checkbox" name="checkbox-mini-0" id="checkbox-mini-0" data-mini="true"><label for="checkbox-mini-0">small pack 150g</label></form></li><li class="prd-items-qt"><div class="col"><i class="minus"></i><i class="qt">12</i><i class="plus"></i></div><div class="col"></div><div class="col">rs: 150/-</div></li></ul></div></div>');
you should think using templates (ex. fiddle)
Comments
Post a Comment