If I run this code -
var html= '<html><head></head><body><div class="bar"></div></body></html>'; console.log($(html).find('div'));
I get no results returned, if I run this code -
var html= '<html><head></head><body><div><div class="bar"></div></div></body></html>'; console.log($(html).find('div'));
Then I get a single result returned - the inner div (<div class="bar"></div>
). I would have expected the first code snippet to return a single result and the second snippet two results.
Similarly, this code returns no results -
var code = $("<div id='foo'>1</div><div id='bar'>2</div>"); console.log(code.find('div'));
but this code alerts 'div' twice -
var code = $("<div id='foo'>1</div><div id='bar'>2</div>"); code.each(function() { alert( this.nodeName ); })
Given the result of the second snippet, I would have expected the first code snippet to return two results. Could someone please explain why I'm getting the results I'm getting?
http://jsfiddle.net/ipr101/GTCuv/
JavaScript String search() Method ... The search() method searches a string for a specified value, and returns the position of the match. The search value can be string or a regular expression. This method returns -1 if no match is found. Read more about regular expressions in our RegExp Tutorial and our RegExp Object Reference.
Normally jQuery selectors do not search within the "text nodes" in the DOM. However if you use the .contents() function, text nodes will be included, then you can use the nodeType property to filter only the text nodes, and the nodeValue property to search the text string.
Find text string using jQuery? Say a web page has a string such as "I am a simple string" that I want to find. How would I go about this using JQuery? jQuery has the contains method. Here's a snippet for you: <script type="text/javascript"> $ (function () { var foundin = $ ('*:contains ("I am a simple string")'); }); </script>
Definition and Usage. The search() method searches a string for a specified value, and returns the position of the match. The search value can be string or a regular expression. This method returns -1 if no match is found.
Let's split this question into two parts.
First:
var html= '<html><head></head><body><div class="bar"></div></body></html>'; console.log($(html).find('div'));
and
var html= '<html><head></head><body><div><div class="bar"></div></div></body></html>'; console.log($(html).find('div'));
do not work because according to the jQuery()
docs:
When passing in complex HTML, some browsers may not generate a DOM that exactly replicates the HTML source provided. As mentioned, we use the browser's .innerHTML property to parse the passed HTML and insert it into the current document. During this process, some browsers filter out certain elements such as
<html>
,<title>
, or<head>
elements. As a result, the elements inserted may not be representative of the original string passed.
<html>
, <head>
, and <body>
tags are getting stripped out, and <div class="bar"></div>
remains. find
only searches inside the resulting <div>
, and cannot find anything.<html>
, <head>
, and <body>
tags are getting stripped out, and <div><div class="bar"></div></div>
remains. find
searches inside the result, and finds a single <div>
.As for your second part:
var code = $("<div id='foo'>1</div><div id='bar'>2</div>"); console.log(code.find('div'));
You first give jQuery a string, which it takes and makes into a jQuery object with the two <div>
's. Then, find
searches in each <div>
, finds nothing and returns no results.
Next, in
var code = $("<div id='foo'>1</div><div id='bar'>2</div>"); code.each(function() { alert( this.nodeName ); })
each
loops through the jQuery object, taking each of the two created <div>
's, and alerts their node name. Therefore, you get two alerts.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With