dom-manipulation | 易学教程

Filter elements out of a jquery object based on text content

阅读更多关于 Filter elements out of a jquery object based on text content

问题 I am trying to use contains with 'this' keyword, but it is giving an error. JS $(function(){ var check=$('ul').find('li').filter(function(){ return $(this:contains('two')).css('color','red') }) }) HTML <ul> <li id="one">one</li> <li id="two">two</li> <li id="one">one</li> <li id="two">two</li> <li id="one">one</li> <li id="two">two</li> <li id="one">one</li> <li id="two">two</li> <li id="one">one</li> <li id="two">two</li> </ul> 回答1: Is this what you are looking for? Fiddle $(function () { $(

Extract <svg> element by using document.evaluate()?

阅读更多关于 Extract element by using document.evaluate()?

问题 I am trying to use document.evaluate() to extract certain child elements out of a <svg> element. But I have problems by just extracting the <svg> itself. I can extract everything up to the <svg> , but no further. For example this works well : document.evaluate('//*[@id="chart"]/div/div[1]/div', document, null, XPathResult.ANY_UNORDERED_NODE_TYPE, null).singleNodeValue) This gives me (shortened) : <div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;" aria-label="Et

jQuery how to remove all <span> tags from a <div>?

阅读更多关于 jQuery how to remove all tags from a ?

问题 I've tried both of the following but none of them worked: $('#divhtml').remove('span') $('#divhtml').find('span').remove() EDIT: $('#divhtml').find('span').remove() worked on 2nd try. 回答1: You have already used a correct statement: $('#divhtml').find('span').remove() This should work. Please provide more context... See this jsfiddle as "proof" that something else is wrong: http://jsfiddle.net/Pbgqy/ 回答2: Try this: $("#divhtml span").remove() 来源： https://stackoverflow.com/questions/8931955

Filter elements out of a jquery object based on text content

阅读更多关于 Filter elements out of a jquery object based on text content

I am trying to use contains with 'this' keyword, but it is giving an error. JS $(function(){ var check=$('ul').find('li').filter(function(){ return $(this:contains('two')).css('color','red') }) }) HTML <ul> <li id="one">one</li> <li id="two">two</li> <li id="one">one</li> <li id="two">two</li> <li id="one">one</li> <li id="two">two</li> <li id="one">one</li> <li id="two">two</li> <li id="one">one</li> <li id="two">two</li> </ul> Is this what you are looking for? Fiddle $(function () { $('ul').find('li').filter(function () { return this.innerHTML == 'two'; }).css('color','red') }) Or to match

jQuery - how to append multiple nodes to container

阅读更多关于 jQuery - how to append multiple nodes to container

I need to append multiple nodes to a container. Rather than doing a slow DOM append inside each iteration, I want to queue up the nodes in a document fragment (open to other ideas) and append them all at one time. Here is my code: var fragment = document.createDocumentFragment(); $.each( poFailureInfoMultiple, function(i,e){ fragment.appendChild( $('<button/>', { 'class': 'el-contents-center multiple-record' }) ); }); $('#some-container').html( fragment ); My problem is I am getting an error message stating: Could not convert JavaScript argument arg 0 [nsIDOMDocumentFragment.appendChild] So

Trouble programmatically adding CSS to IE

阅读更多关于 Trouble programmatically adding CSS to IE

问题 I have a bookmarklet which inserts a CSS stylesheet into the target DOM via a "link" tag (external stylesheet). Recently, this stopped working on Amazon.com, in Internet Explorer only. It works on other sites, and with other browsers (even on Amazon.com). The technique we're using to insert the stylesheet is pretty straightforward: document.getElementsByTagName('head')[0].appendChild(s); Where "s" is a link object created with document.createElement . Even on Amazon, I see via the Internet

jQuery - move element and return to its exact previous location?

阅读更多关于 jQuery - move element and return to its exact previous location?

问题 I'm trying to use jQuery to move an element from one location to another in the DOM. There are elements identical to the originating container alongside it, so how do I store its exact previous location so it will return back to it? Here's an example... <div class="container"></div> <ul> <li></li> <li><div class="move">Content</div></li> <li></li> <li><div class="move">Content</div></li> <li></li> </ul> ...the "move" divs are individually moving to the "container" div, then back to their

Appending a DOM element twice (jQuery)

阅读更多关于 Appending a DOM element twice (jQuery)

问题 Can someone explain why the following snippet does not add <foo> to both #a and #b ? HTML: <div id="a"></div> <div id="b"></div> JS: $(function(){ var $foo = $("<foo>HI</foo>"); $("#a").append($foo); $("#b").append($foo); }); jsfiddle Edit: thanks for the helpful points, the fact that .append() moves the element explains this behavior. Since the element in my application is actually a Backbone View's .el , I prefer not to clone it. 回答1: Because using append actually moves the element. So your

How to remove original element after it was cloned?

阅读更多关于 How to remove original element after it was cloned?

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? I don't know why you can't just append the element to the parent, instead of cloning it then removing it. Anyway $('.test1').remove().clone().appendTo('#test'); Demo: Fiddle If you want to copy the data and handlers associated

Insert after parent of element

阅读更多关于 Insert after parent of element

What sort of selector would be I need in order to insert after the parent (divouter) of the test3 class in the example below? Thanks. <div class='divouter'> <div class='divinner'> <input class=test1></input> </div> </div> <div class='divouter'> <div class='divinner'> <input class=test2></input> </div> </div> <div class='divouter'> <div class='divinner'> <input class=test3></input> </div> </div> <div class='divouter'> <div class='divinner'> <input class=test4></input> </div> </div> You could use the $.after() method: $(".test3").closest(".divouter").after("<div>Foo</div>"); Or the $.insertAfter