dom-manipulation

问题 HTML: <div id="test"> <p class="test1">test 1</p> <p class="test2">test 2</p> <p class="test3">test 3</p> <p class="test4">test 4</p> </div> <div class="clickdiv">click</div> jQuery $('.clickdiv').on('click', function(){ $('.test1').clone().appendTo('#test'); } This will result one more <p> with class = "test1" . Now how can I remove the original one that is first one? 回答1: I don't know why you can't just append the element to the parent, instead of cloning it then removing it. Anyway $('

问题 HTML: <div id="test"> <p class="test1">test 1</p> <p class="test2">test 2</p> <p class="test3">test 3</p> <p class="test4">test 4</p> </div> <div class="clickdiv">click</div> jQuery $('.clickdiv').on('click', function(){ $('.test1').clone().appendTo('#test'); } This will result one more <p> with class = "test1" . Now how can I remove the original one that is first one? 回答1: I don't know why you can't just append the element to the parent, instead of cloning it then removing it. Anyway $('

问题 I have a form where users can buy credits with PayPal or banktransfer as payment option. If a user selected "PayPal" as an option, the form data will be send to PayPal, using JQuery/JS: $(':radio').change(function () { var $this = $(this).val(); if ($this === 'pp') { $('#form').attr('action','https://www.paypal.com/cgi-bin/webscr'); } else { $('#form').attr('action',''); } }); The user can also choose how much he wants to pay, which also selects how many credits he'll get from it.

问题 Currently when I receive results from search I loop through results and append it to a list (I guess this causes browser to re-render page every time item is added - is there a way to confirm this?). $.each(results, function(key, val){ $(".results").append("<div>"+ val +"</div>"); }); In this part of the second browser lags a bit (there are animations and stuff...). Would be more efficient to create separate div.results and add items in javascript then replace it in dom? What would be the

问题 I have a remote javascript file containing a custom jQuery event handler. When this is inserted into the DOM as a <script src='...'></script> element, the custom event handler is not registered. However, if I add the exact same script as straight JS ( <script>...</script> ), the event handler is registered, and everything executes as expected. Why isn't the event handler being bound in jQuery when the script is inserted as a remote file? Example The remote file, containing the custom event

问题 I'm investigating virtual-dom right now, and I'm wondering whether virtual-dom is really faster than manual manipulation with view. Now I understand that virtual-dom and diff algorithm can prevent unnecessary re-flows, for example when we want to change this: <div> <div>a</div> <div>b</div> </div> To this one: <div> <div>c</div> <div>d</div> </div> So when we use direct manipulation we will have probably 4 re-flows: 2 for removing each div and for creating new one. We will also have more

问题 How would you add a class named newClass to an opening tag like <a class='abc'> or <p style=display:block> using php? 回答1: Regexp example: <?php function addClass($htmlString = '', $newClass) { $pattern = '/class="([^"]*)"/'; // class attribute set if (preg_match($pattern, $htmlString, $matches)) { $definedClasses = explode(' ', $matches[1]); if (!in_array($newClass, $definedClasses)) { $definedClasses[] = $newClass; $htmlString = str_replace($matches[0], sprintf('class="%s"', implode(' ',

问题 In my web browser userscript project I need to replace just one text node without affecting the other HTML elements under the same parent node as the text. And I need to replace it with more than one node: <div id="target"> foo / bar; baz<img src="/image.png"></div> Needs to become: <div id="target"> <a href="#">foo</a> / <a href="#">bar</a>; <a href="#">baz</a><img src="/image.png"></div> I know jQuery doesn't have a whole lot of support for text nodes. I know I could use direct DOM calls

问题 I'm using Twitter Bootstrap for UI in my webapp. Particulary its Alert component. I want to write a simple angular service to wrap Bootstrap's Alert to have a possibility of informing users from any peace of angular code. Like this: Informer.inform("message", "ERROR"); // will result in alerting with `alert-error` class Informer.inform("message", "INFO"); // will result in alerting with `alert-info` class My idea is to to append the template to the end of the <body> : <div class="alert {

问题 I'm using Twitter Bootstrap for UI in my webapp. Particulary its Alert component. I want to write a simple angular service to wrap Bootstrap's Alert to have a possibility of informing users from any peace of angular code. Like this: Informer.inform("message", "ERROR"); // will result in alerting with `alert-error` class Informer.inform("message", "INFO"); // will result in alerting with `alert-info` class My idea is to to append the template to the end of the <body> : <div class="alert {