62

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.

Andreas is moving to Codidact
  • 1,642
  • 4
  • 21
  • 40
Raphael
  • 7,972
  • 14
  • 62
  • 83
  • Can you share what exactly you mean by string and how does it appear? – Sarfraz Sep 20 '10 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 Sep 20 '10 at 18:05

5 Answers5

110

Yes, you can turn the string into elements, and select elements from it. Example:

var elements = $(theHtmlString);
var found = $('.FindMe', elements);
Guffa
  • 687,336
  • 108
  • 737
  • 1,005
  • 19
    This is called using `elements` as the [ **context** ](http://api.jquery.com/jQuery/). It is internally implemented with [ **.find()** ](http://api.jquery.com/find/) , so an equivalent way to write the above is: `var found = elements.find('.FindMe');` – Peter Ajtai Sep 20 '10 at 19:55
  • 1
    This method (`$('selector', $('html string'))`) doesn't seem to work for me in jQ:1.6.2 – vol7ron Aug 10 '11 at 13:46
  • 10
    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', $('
    foo
    bar
    '));`. Because it uses find, which only looks at the children, it'll never find any `pre`s. Easiest solution is to add a wrap.     – vol7ron Aug 10 '11 at 14:05
  • @vol7ron thanks so much for explaining that for me; this was driving me batty! – Tobias J Jun 05 '15 at 16:26
  • 2
    What's the difference this and `$(theHtmlString).find('.FindMe')` ? – Alex G Sep 09 '16 at 13:36
  • 5
    @AlexG: Using `elements.find(selector)` does the same as `$(selector, elements)`. – Guffa Sep 11 '16 at 12:41
  • If your html has dot ( . ) or single quote ( ' ) character, this doesn't work – Riz Jan 03 '17 at 14:15
  • @Guffa 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? – Jay Momaya Apr 30 '18 at 14:28
  • `found` can have multiple elements, how can you get the value of elements in `found` ? – Shoyeb Sheikh Feb 28 '21 at 15:21
21

Just wrap the html text in the $ function. Like 

$("<div>I want this element</div>")
KingErroneous
  • 989
  • 1
  • 8
  • 16
  • 1
    I love you for telling me that this is possible. This just solved all my problems. – jamzsabb Dec 19 '13 at 04:31
  • 1
    @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 – Jay Momaya Apr 30 '18 at 14:29
12

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.

Peter Ajtai
  • 56,972
  • 13
  • 121
  • 140
  • 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 – Jay Momaya Apr 30 '18 at 14:29
11

Just use $.filter

var html = "<div><span class='im-here'></span></div>"
var found = $(html).filter(".im-here")
jayson.centeno
  • 835
  • 11
  • 15
  • 1
    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`. – LeeC Jan 24 '20 at 16:17
3

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);
});
hiFI
  • 1,887
  • 3
  • 28
  • 57
  • 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`. – LeeC Jan 24 '20 at 16:22