dom-manipulation

问题 Currently I have this JQuery script var img = $(this); img.wrap('<div class="photo"></div>'); img.parent().append("<p>" + img.attr("alt") + "</p>"); which successfully turns the following: <img src="photo.jpg" alt="caption"> into this <div class="photo"> <img src="photos.jpg" alt="caption"/> <p>caption</p> </div> All is well unless the image has a link as a parent; <a href="#"><img since I want it to be correct html (I'm fussy) improving the resulting outcome bellow would be satisfactory <a

问题 Using Jquery 1.7.1 I have two divs <div class="highlightStart"></div> {page content here} <div class="highlightEnd"></div> Those show up in the page source. But this jquery I added at the bottom of the page is not working: <script type="text/javascript" id="makeHighlight"> $(document).ready(function () { $("div.highlightStart").replaceWith("<section class='highlight'>"); $("div.highlightEnd").replaceWith("</section>"); }); </script> No javascript errors showing in the browser console (Chrome)

问题 What is the most recommended/efficient way to insert a node in the middle of a tree. How to transpose this <svg id="root" ... > <g id="child1">...</g> <text id="child2">...</text> <rect id="child3">...</rect> ... </svg> to this <svg id="root" ... > <g id="parent"> <g id="child1">...</g> <text id="child2">...</text> <rect id="child3">...</rect> ... </g> </svg> @jsFiddle I have tried var $parent = $("g").attr("id","parent"); var $root = $("#root"); $root.contents().each(function(){ $child=$

问题 I am dynamically adding a video element to the page with custom controls. All of my custom controls are working except for the 'timeupdate' event which I'm using to updated the seek bar position. I've tried using: $(document).on('timeupdate', 'video', function () { alert("got it"); }); 回答1: I attempted to solve this with delegated events. api.jquery.com/on I could fire other events fine when delegating from the document, but not on the video element itself. So I slept since then and it turns

问题 I have a multilevel menu like this : <ul> <li>item 1 <ul> <li>item 1.1</li> <li>item 1.2</li> </ul> </li> <li>item 2</li> <li>item 3 <ul> <li>item 3.1</li> <li>item 3.2</li> </ul> </li> <li>item 4</li> </ul> In jQuery I have $("#divId ul li:odd").addClass("blue"); $("#divId ul li:even").addClass("green"); The problem is that jQuery adds the class to all the lists. I would like jQuery to just add the class to the first level (ul > li.class) and NOT the inner childs (ul > li > ul > li.class)

问题 I have been searching the web for hours for this but I couldn't find an explanation or solution. So let's see if anyone can provide me with one here... The problem I am having is that I have some "invalid" old HTML and we are currently revamping the website by injecting some other div's etc through JQuery. But after having changed the DOM some functionalities are not working anymore. Let me give you an example. The old HTML is something like: <table> <form method="POST"> <tr> <td><input type=

问题 I'm having a little difficulty with Ext JS's ActionColumn, but that's really a separate issue. What I'm trying to do right now is save off whatever DOM manipulation I do with Ext JS, so that when I refresh my grid, the changes stay. var grid = Ext.create('Ext.grid.Panel', { columns: [{ xtype: 'actioncolumn', width: 50, items: [{ icon: 'http://cdn.sencha.com/ext/gpl/4.2.1/examples/personel-review/images/edit.png', tooltip: 'Edit', iconCls: 'hideable', handler: function(grid, rowIndex, colIndex

问题 Is there any way I can get a DOM element and manipulate it so I can put my username and password in order to login automatically, when starting the application? For now, I've used Robot in order to let the computer pass in my login information and login automatically, but I need a better method. Any help is much appreciated! import java.awt.AWTException; import java.awt.Desktop; import java.awt.Robot; import java.awt.Toolkit; import java.awt.datatransfer.Clipboard; import java.awt

问题 With data like: var days = ["Sun", "Mon", "Tues", "Wed", "Thur", "Fri", "Sat"]; I need to have the html structure become: <div> <input id="day0" type="checkbox"> <label for="day0">Sun</label> <input id="day1" type="checkbox"> <label for="day1">Mon</label> .... Etc </div> Currently my current failed solution is: var selection = d3.select("div"); var enter = selection.selectAll("input").data(days).enter() enter.append("input") .attr("type","checkbox") .attr("id",function(d,i){ return "day"+i;})

问题 How would I write an event in jQuery so that if I click any of the links it'll delete not the divouter surrounding it, but the divouter before it? <div class='divouter'> <a href='#'>Link</a> </div> <div class='divouter'> <a href='#'>Link</a> </div> <div class='divouter'> <a href='#'>Link</a> </div> <div class='divouter'> <a href='#'>Link</a> </div> 回答1: Try this: $(".divouter a").click(function() { $(this).parent(".divouter").prev(".divouter:last").remove(); }); 回答2: $('.divouter a').click