html - Change certain <ul> and <li> (jQuery) -
i'm starting learn how code jquery, javascript , on , wanted ask if it's possible change few <ul> , <li> <div> , <p>.
i heard plugins used , 1 of biggest advantages of jquery thought i'd try build 1 myself. unfortunately i'm new programming don't know important stuff.
at moment plugin turns every <div> <ul> , goal change menu not moveable box. @ moment script changes , moveable div turns ul buttons dissapear.
my html file has menu , box moveable 2 buttons inside.
<!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>list</title> <script type="text/javascript" src="jquery-1.10.2.js"> </script> <script type="text/javascript" src="plugins/jquery.replaceelements-1.0.js"> </script> <script type="text/javascript" src="useplugin.js"> </script> <style type="text/css"> .green { color: green; } #menu { font-family: arial; } #move, #base { padding: 5px; text-align: center; font-family: arial; background-color: #99ccff; border: solid 1px #c3c3c3; } #move { padding: 50px; display: none; } </style> </head> <body> <ul id="menu"> <li>text 1</li> <li>text 2</li> <li>text 3</li> <li>text 4</li> <li>text 5</li> <li>text 6</li> </ul> <div id="base"> click expand </div> <div id="move"> <button id="format">click change format</button> <button id="color">click change color</button> </div> </body> </html> i use following script adapt plugin:
$(document).ready(function(){ $("#format").click(function() { if ($("#menu").attr("class") == "changed") { $("#menu") .replacereverse(); } else { $("#menu") .replaceelements(); } }); $("#color").click(function() { $("#menu") .changecolor(); }); $("#base").click(function() { $("#move") .slidebutton(); }); }); and plugin.
;(function($) { jquery.fn.replaceelements = function(arg, callback) { var options = $.extend({}, $.fn.replaceelements.defaults, arg, {callback:callback}); return this.each(function() { replace(options,$(this).parent()); }); }; function replace(opts, obj) { (var in opts) { $(obj).find(i).each(function() { var thiselement = $(this); thiselement.wrapinner("<" + opts[i] + " />"); thiselement.children().addclass("changed"); if(thiselement.attr("id")) { thiselement.children() .attr("id",thiselement.attr("id")); } thiselement.children().unwrap(); }); } callfn(opts.callback); }; function callfn (callback) { if ($.isfunction(callback)) { callback.call(this); } }; $.fn.replaceelements.defaults = { ul: 'div', li: 'p' } })(jquery); ;(function($) { jquery.fn.replacereverse = function(arg, callback) { var options = $.extend({}, $.fn.replacereverse.defaults, arg, {callback:callback}); return this.each(function() { replacerev(options,$(this).parent()); }); }; function replacerev(opts, obj) { (var in opts) { $(obj).find(i).each(function() { var thiselement = $(this); console.log(opts[i]); thiselement.wrapinner("<" + opts[i] + " />"); if(thiselement.attr("id")) { thiselement.children() .attr("id",thiselement.attr("id")); } thiselement.children().unwrap(); }); } callfn(opts.callback); }; function callfn (callback) { if ($.isfunction(callback)) { callback.call(this); } }; $.fn.replacereverse.defaults = { div: 'ul', p: 'li' } })(jquery); i thankful if 1 of helped me (newbie) problem , apologize bad english.
that's because don't need $(this).parent() gives body element, since this #menu item in case, , parent element body (which don't want, since want switch inner elements of menu).
when click first time, nothing bad happens, since #move element div. when click second time switches alls divs ul inside body element.
a solution be:
either change
$(this).parent()$(this), in case you'll have handle case#menuitself, since$(obj).findwon't returnobjitselfor leave is, change
$(obj).find$(obj).find('#' + id + ', #' + id + ' ' + ),id= target element id (so you'll have introduce additional parameter:replace(options,$(this).parent(), $(this).attr('id'));
Comments
Post a Comment