I wonder if there is a way to convert string into jQuery object and select inner elements without injecting the whole string into DOM and manipulate it in there. Thanks.
If possible, please give me example of converting
<div id=a1></div>
<div id=a3></div>
And select a1 from the object variable.
This will create elements from the html and find the a1 element:
var element = $('<div id="a1"></div><div id="a3"></div>').filter('#a1').get(0);
The correct way to do this is:
var a1 = $('<div id="a1"></div><div id="a3"></div>').filter('#a1')[0];
Getting the DOM element out with [0] is equivalent to .get(0).
Update: interesting, I've never come across this corner case before but this:
var a1 = $("#a1", "<div id=a1><//div><div id=a3><//div>")[0];
doesn't work when the element is at the top level, which I consider to be a bug. I've never come across that before so I thought I'd leave it up here as a cautionary tale. Thanks to Crescent Fresh for pointing that out.
Related
I'm writing a chrome extension to redesign the tumblr dashboard for a project.
This is a small thing but has been very frustrating. I want to get rid of the word "notes" after the number of notes bellow each post.
The string is under a class .note_link_current so I tried this
var textNotes = $('.note_link_current').text();
textNotes = textNotes.replace('notes', ' ');
$('.note_link_current').text(textNotes);
What seems to happen is that I get a combined string of all the notes of all the posts.. How do I get it so it affects all of them individually?
Right now I'm getting something like this:
251
63 notes441 notes74 notes851 notes49,263 notes2,561 notes142 notes1 note651 notes
Any help would be greatly appreciated!
What #FelixKling said, but with more explanation:
A jQuery selector like $('.note_link_current') will return an array of nodes. You're trying to make an operation on this array like it was one node.
Instead, what you should do is invoke .each(), to perform an operation on every element.
$('.note_link_current').each( function(index) {
// Inside this function, "this" refers to the (DOM) element selected
var text = $(this).text();
/* ... */
});
I have 2 diferent divs: [Div1] and [Div2].
My goal is that when i click on some event, i want [Div1] to be the exactly the same as the [Div2].
I used this code:
document.getElementById("div1")=document.getElementById("div2");
This is a javascript error and i dont know how to do anything like this.
I cant copy every element cuz those might change based on the users actions.
I found something about cloning a node but i couldn't put it to work.
Any sugestions?
Well depending on what you mean by "exactly the same" (sharing the same reference? duplication of values?), you might want to try cloning:
Try:
var node = document.getElementById("div2");
var node2 = node.cloneNode(true); //creates deep clone with events you can do something with
///Or you could just copy the markup over
document.getElementById("div1").innerHTML = node2.innerHTML;
Use jquery instead; when the user clicks the button/any action, use the following snippet:
$("div1").html($("div2").html());
I am trying to get the innerHTML of a hidden span. The JavaScript is from an iframe HTML page, and the hidden span resides in the parent page. A different function works when accessing contents of a list from the parent, but I can't seem to get at my span...
WORKS
document.getElementById(parent.genL[i]);
DOESNT WORK
document.getElementById(parent."span"+i).innerHTML;
- SyntaxError: missing name after . operator
The above line of code resides in a for loop and as it iterates through i it will grab data from each separate span. the hidden spans start at ID "span1" through upwards of 10-40k different hidden spans.
Anyways, I have a feeling that it has to do something with trying to concatenate the string int i. I assume i is an int anyways. Any thoughts? Thanks so much everyone!
Edit - Words, and added the innerHTML portion to the doesn't work line of code. Not sure if that will be making a difference or not...
Edit2 - Great answers everyone, learned some good syntactical tricks :) I simply moved the parent. portion to the front of the code as reccomend by the comment of mplungjan and the answer from Jacob T. Nielson. For some reason I still got the error using the brackets as suggested, but I will definitely tuck the brackets into my memory for future similar situations!
parent.document.getElementById("span"+i).innerHTML;
:)
Try changing it to an indexer.
document.getElementById(parent["span"+i]);
If the parent in the brackets is an object and you're trying to access something like parent.span1 then you need to use bracket notation instead of the dot.
document.getElementById(parent["span"+i]); should work fine.
I think what you are trying to do is get the i-th span element on the parent page. Correct?
You can do it like this
var s = parent.document.getElementsByTagName('span')[i];
s.innerHTML // <-- access innerHTML
If an html element id has no period in it, then copying between elements is of course trivial, e.g.:
var theForm = document.paymentForm;
theForm.BillStreet1.value = theForm.ShipStreet1.value;
I've got a case where I need to have period in my ids, namely id="bill.street1" and id="ship.street1", and the following doesn't work :-(
theForm.bill.street1.value = theForm.ship.street1.value;
Can you please let me know how to handle the period? Does jquery make this simpler?
jQuery makes everything simplier by using css selectors to access elements. However, if you don't want to use jQuery, you can access the element this way, I believe.
theForm['bill.street1'].value = theForm['ship.street1'].value;
I haven't tested this, but it should work because periods are an alternate method to access an array, iirc.
Be sure to use theForm['bill.street1'].value = theForm['ship.street1'].value;
and not theForm.['bill.street1'].value = theForm.['ship.street1'].value;. The extra periods make the format invalid, in the same way using array.[2] instead of array[2] would invalidate it.
theForm['bill.street1'].value
theForm['ship.street1'].value
I'm creating several elements which are almost identical paths, with a long list of co-ordinates. Is there a compact way to create one element, and to to make slightly different copies of it?
The elements are created by 'createElementNS'. The obvious (I think) answer is to clone the first element into a new element, and to set only the attributes in the second element which have changed. This works in Chrome and IE9, but not in FF4 or Opera.
Another obvious solution is just to copy the first element into a var, and to set the changed attributes in the var. This doesn't work in Chrome or FF.
I could possibly create a new element via createElementNS, and copy all the attributes in from the old element, but I don't know of a way to cycle through all attributes, which would help.
This is an example of the almost-working clone code:
obj = svgDocument.createElementNS(svgns, "path");
obj.setAttributeNS(null, "id", "pbox1");
...lots more attributes set
svgDocument.documentElement.appendChild(obj);
// now try to clone and copy:
var obj2 = obj.cloneNode(true);
obj2.setAttributeNS(null, "id", "pbox2");
...change a few obj2 attributes
svgDocument.documentElement.appendChild(obj2);
Any ideas?
Thanks -
Al
var templateElement = document.createElement(// create template element);
var firstElement = templateElement.cloneNode(true) // the true make sure it clones all child nodes
var firstElement.setAttribute()// change what you need
and so on for as many elements as you need.
aaah.. stupid typo on my part; sorry. The code I posted above was correct, but I didn't show the other clones underneath. On the final one, I put in var obj10 = obj.cloneNode() , leaving out the 'true'. It looks like FF4 and Opera got the right answer, and Chrome and IE9 copied all the attributes anyway.