I'm trying to simply reproduce what is on the jquery site for the .get method:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<ul>
<li id="foo">foo</li>
<li id="bar">bar</li>
</ul>
<script type="text/javascript">
alert($('li').get());
</script>
</body>
</html>
It should return
[<li id="foo">, <li id="bar">]
But all I get is [object HTMLLIElement],[object HTMLLIElement]
Does anybody know what I might be doing wrong here?
Everything is alright:
The .get() method grants us access to the DOM nodes underlying each
jQuery object.
Get returns the DOM elements hold by the jQuery variable.
And when you output DomElements they become the form "HTMLLIElement".
But that's what .get does! It will retrieve the HTML DOM elements matched by the selector. If you want the jQuery objects, you should use just $('li').
Simple, select the ul element and display it's content with the html function:
alert($('ul').html());
html docs:
Description: Get the HTML contents of the first element in the set of matched elements.
You're not necessarily doing anything wrong.
What you're getting is the actual result of calling toString (which alert will do for you) on an array with 2 <li> DOM objects in it:
[object HTMLLIElement],[object HTMLLIElement]
However, what's mentioned in the API Documents isn't a string representation of the array, but is meant as a description of the array's current state in memory:
[<li id="foo">, <li id="bar">]
It was meant just as a shorter way of saying something like this:
The result is an array with 2 DOM objects that represent the <li id="foo"> and <li id="bar"> elements, respectively.
Now, if you actually want to get the markup in the alert, you'll have to get the outer HTML of the elements. Then try:
alert($('li').map(function () { return $(this).outerHTML(); }).get());
Example: http://jsfiddle.net/cmpwM/
Related
I want to get a result exactly like dom.byId() returns, a domNode. However I cannot use id on my domNode. So my only other option is to search for it by class name instead of by id.
I tried
query(".classname").first()
because i know there is only one domNode that implements this class name
However I cannot use the result (which is a NodeList) in any subsequent functions in dojo that expect a domNode for example dojo/dom-geometry::position()
Well, If you want to access the nodes using class name.
below is the working code -
require(["dojo/query", "dojo/NodeList-traverse", "dojo/NodeList-dom", "dojo/domReady!"], function(query) {
query(".className").first().style({
"backgroundColor": "#FF0"
});
});
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"
data-dojo-config="async: true"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css">
<ul>
<li class="className">First</li>
<li class="className">Second</li>
<li class="className">Third</li>
</ul>
JS Fiddle : https://jsfiddle.net/vikash2402/jfwsLnd4/
Feel free to shoot your further queries.
Hoping this will help you :)
I'm completely new in js and jquery. While trying to understand it, I've came up with an issue. But before that, I would like to apologise if my question contains subquestions.
First of all, I saw in this question that, .checked should be used with DOM objects while .attr() needs to be used with jquery objects. Now my question:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<ul>
<li>List element 1</li>
<li>List element 2</li>
</ul>
checkbox1:<input type='checkbox' id='checkbox1'/>
checkbox2:<input type='checkbox' id='checkbox2'/>
<script>
var checkboxes=$('input');
checkboxes[1].checked=true;
</script>
</body>
</html>
IN here, Does checkboxes variable is a jquery object or dom element ? I was thinking that $() returns a jquery object (as stated here) but when I try, checkboxes.attr('checked',true) rather than checkboxes[1].checked=true; , I got error. My another assumption is that, may be checkboxes variable is a jquery object and checkboxes[1] is an dom element? Am I right?
Edit
One more question, when I want to learn type of a variable, I'm writing browser's console this statement : typeof(VariableName). Unfortunatelly, When I write typeof(checkboxes) or typeof(checkboxes1), I got always Object result. But just know I learn that one of them is Jquery object and the other is DOM object. Is there any function which gives me these differences?
one of them is Jquery object and the other is DOM object. Is there any
function which gives me these differences?
You can use:
obj instanceof jQuery
If you want more universal way you can use:
Object.prototype.toString.call(myVariable);
I need to get the object of second level html element in my page.
<html>
<div id="out">
jasoidjisa
<html>
<head>//This object
<div id="in">
hihisdhi
</div>
</head>
</html>
</div>
<script>
alert(document.getElementsByTagName('html'));
</script>
Help me to access this html element via js
HTML is a reserved tag name and so you can't use it in the manner in which you have used it here. Which particular value from above are you trying to get exactly ? It might make sense to use the <div> tag with a class or I'd to identify it instead. If you specify which value you are specifically looking to get I can write up a theoretical solution.
vsank7787 was totally correct. Maybe you could use iFrames instead of nested html inside a HTML document since html is a reserved keyword.
Hi is there anyway to search text in dom, as we do for SQL query LIKE?
i mean, i have.
<ul>
<li>ab</li>
<li>abrecot</li>
<li>abus</li>
<li>aby</li>
<li>abrea</li>
</ul>
i would like to search for "abre" and so return in text ASC order:
<li>abrea</li>
<li>abrecot</li>
is this possible?
definitely the query would looks like doing:
SELECT <li> FROM <ul> WHERE text LIKE 'abre%' ORDER BY text ASC; :))
As you are looking for elements whose text starts with a specified string, you can use the filter method:
var x = $("ul li").filter(function() {
return $(this).text().substr(0, 4) === "abre";
});
This will only return elements which have the string "abre" at the start. The other answers using the contains method will return elements with the string found anywhere within them, which does not match your pseudo-SQL query.
Here's a working example of the above.
I think you would want the jQuery 'contains' function, have a look at the docs here:
http://api.jquery.com/contains-selector/
Your example would probably look like this:
$("li:contains('abre')")
EDIT to include the comments here, if you are looking for "starts with", you can do this on an element using the following syntax:
$('li[anAttribute^="abre"]')
But this assumes you have an attribute to query which i don't think you do, in which case the filters answer will likely suit your needs best.
The :contains() selector is probably what you're looking for:
http://api.jquery.com/contains-selector/
QUOTE:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn</div>
<script>
$("div:contains('John')").css("text-decoration", "underline");
</script>
</body>
</html>
I know this is simple, but I can't wrap my head around it. Currently the following code returns "[object HTMLDivElement],[object HTMLDivElement]" I'd like it to return "div1,div2". Any thoughts? Thanks guys.
<HTML>
<HEAD>
<script type="text/javascript" src="path_to/prototype.js"></script>
<script>
function linkClick ()
{
alert($$('div.basic'));
}
</script>
</HEAD>
<BODY>
<div id="div1" class="basic" onclick="linkClick();"></div>
<div id="div2" class="basic" onclick="linkClick();"></div>
</BODY>
</HTML>
I had the same problem, there is a simple solution :
If varElement is your object containing a [HTMLDivElement] (or other DOM object) simply add '.id'
e.g.
varElement.id
There's an optimization in prototype specifically for this:
$$('div.basic').pluck('id')
If I read your question right, you want a list of div IDs, rather than a string of ids separated by a comma.
var ids = $$('div.basic').collect(function(el) { return el.id; }); //array of ids
alert(ids.join(','));
collect is another name for map, which is allows you to transform the elements one type of collection into another type by applying a "selector" function to each.
alert($$('div.basic').invoke('identify').join(',');
The invoke will call a function by name. The identify function will provide the id. When called on an array it will return an array of their ids. Join turns them into a string with commas in between.