I'm looking for a way to get a HTML element from a string that contains HTML. Is it possible to use a jQuery selector to do this?
I have a Javascript function that gets an entire page from the server, but I only need one element from that page.
-
Can you share what exactly you mean by string and how does it appear?Sarfraz– Sarfraz2010-09-20 18:01:30 +00:00Commented Sep 20, 2010 at 18:01
-
It's a bit unclear what you have. Does the string contain HTML code for a single element, or does it contain code for several elements of which you want to get one?Guffa– Guffa2010-09-20 18:05:44 +00:00Commented Sep 20, 2010 at 18:05
Add a comment
|
5 Answers
Yes, you can turn the string into elements, and select elements from it. Example:
var elements = $(theHtmlString);
var found = $('.FindMe', elements);
9 Comments
Peter Ajtai
This is called using
elements as the [ context ](api.jquery.com/jQuery). It is internally implemented with [ .find() ](api.jquery.com/find) , so an equivalent way to write the above is: var found = elements.find('.FindMe');
vol7ron
This method (
$('selector', $('html string'))) doesn't seem to work for me in jQ:1.6.2vol7ron
Nevermind this occured because as you said it is using
find(), whereas I needed it to use closest(), perhaps jQ should be amended. Problem Case: $('pre', $('<pre><div>foo</div></pre><pre><div>bar</div></pre>'));. Because it uses find, which only looks at the children, it'll never find any pres. Easiest solution is to add a wrap.
scorpio1441
What's the difference this and
$(theHtmlString).find('.FindMe') ?
Guffa
@AlexG: Using
elements.find(selector) does the same as $(selector, elements). |
Just wrap the html text in the $ function. Like
$("<div>I want this element</div>")
2 Comments
jamzsabb
I love you for telling me that this is possible. This just solved all my problems.
Jay Momaya
@KingErronnneous i am having a string '(parseFloat($("#assumptions_table").find("[name=\'assumptions[3][7]\']").val())||0)+((parseFloat($("#assumptions_table").find("[name=\'assumptions[3][7]\']").val())||0)*((parseFloat($("#assumptions_table").find("[name=\'assumptions[4][8]\']").val())||0))/100)', here i want to find which elements are involved then how can i get that
If you are loading a page dynamically from a server then you can target just one element from the loaded page using the following form with .load()
$(selectorWhereToShowNewData).load('pagePath selectorForElementFromNewData');
For example:
$('#result').load('ajax/test.html #container');
Where:
#result is where the loaded page part will be displayed on the current page
ajax/test.html is the URL to which the server request is sent
#container is the element on the response page you want to display. Only that will be loaded into the element #result. The rest of the response page will not be displayed.
1 Comment
Jay Momaya
i am having a string '(parseFloat($("#assumptions_table").find("[name=\'assumptions[3][7]\']").val())||0)+((parseFloat($("#assumptions_table").find("[name=\'assumptions[3][7]\']").val())||0)*((parseFloat($("#assumptions_table").find("[name=\'assumptions[4][8]\']").val())||0))/100)', here i want to find which elements are involved then how can i get that
Just use $.filter
var html = "<div><span class='im-here'></span></div>"
var found = $(html).filter(".im-here")
1 Comment
LeeC
The
filter method works even if the element you want happens to be the outer-most element. The find method only finds descendants, so it would not match the outer-most element. In the example in this answer, you could not use the find method to get the div.You can use $.find
$(document).ready(function() {
var htmlVal = "<div><span class='im-here'>Span Value</span></div>";
var spanElement = $(htmlVal).find("span");
var spanVal = spanElement.text();
alert(spanVal);
});
1 Comment
LeeC
Yes, you can use
$.find—but only if you want just elements inside the outermost element, the div' in this example. The find` method only matches descendants. You could not find the div in this example--but, you can filter the div because the filter method matches any/all elements, including the outermost div.