Suppose I have the xml element
<fruit color="blue" taste="sweet" shape="round"></fruit>
Without jQuery, I could use
fruit.attributes.length
How do I do this with jQuery?
Using jQuery, you'd simply retrieve the DOM element using get(index) or [index] from the jQuery object:
$('someSelector').get(0).attributes.length;
$('someSelector')[0].attributes.length;
jQuery does not provide a wrapper around this native DOMElement property.
I don't think jQuery has a way of doing that. You can do it without jQuery.
$('fruit')[0].attributes.length
Related
Is there a way to convert a DOM element into a Snap.svg element without using a selector? How can I do this?
I cannot find a way in the documentation. (http://snapsvg.io/docs/)
I want to fetch the corresponding Snap.svg element once a Jquery event is triggered, but I have no idea how I can do this in a nice way.
Simply
var mySnapElement = Snap( someDomElement );
Jquery
I am trying to change the inner text on multiple td element which I believe should look something like this although this does not appear to be a jquery object when I am debugging (I could be wrong).
What is the correct way this should be done?
$('.leg-number').each(function () {
this.html('foo');
});
Maybe try this instead:
$('.leg-number').html('foo');
which is a shorter and more efficient way to achieve your goal. It is just asking jQuery to set the inner html of every element with class "leg-number" to "foo" without any explicit iteration. Most of the jQuery methods like .html() can work on sets of elements so you don't really need to use .each() for simple cases like this.
Now on why your version didn't work: Using .each() would work if you wrapped this with the jQuery function $() so you could use the jQuery methods on it:
$('.leg-number').each(function () {
$(this).html('foo');
});
The variable this inside of the .each() callback is a DOM element and you need $(this) to convert it into a jQuery object that wraps this element. See the explanation in the answer by epascarello who explained it before I updated my answer.
Read the docs for each(). this is a DOM Html Element node, not a jQuery object reference. You can either convert it back to jQuery or use innerHTML directly.
$(this).html('foo');
or
this.innerHTML = 'foo';
The docs show using $(this) in the examples.
Change:
this.html('foo');
to:
$(this).html('foo');
You're attempting to use a jQuery method on a non-jQuery object. This of course assumes that your table cells have the class .leg-number.
I have something like this:
$(myElement).siblings()[0].height()
And I cannot get it to work. .siblings()[0] returns pure html instead of a jquery object. How to map it to jquery again, so that I can use .height() property on it?
You want:
$(myElement).siblings().eq(0).height()
Or using .first()
You can use:
$(myElement).siblings().first().height()
I can select (using jQuery) all the divs in a HTML markup as follows:
$('div')
But I want to exclude a particular div (say having id="myid") from the above selection.
How can I do this using Jquery functions?
Simple:
$('div').not('#myid');
Using .not() will remove elements matched by the selector given to it from the set returned by $('div').
You can also use the :not() selector:
$('div:not(#myid)');
Both selectors do the same thing, however :not() is faster, presumably because jQuery's selector engine Sizzle can optimise it into a native .querySelectorAll() call.
var els = toArray(document.getElementsByTagName("div"));
els.splice(els.indexOf(document.getElementById("someId"), 1);
You could just do it the old fashioned way. No need for jQuery with something so simple.
Pro tips:
A set of dom elements is just an array, so use your favourite toArray method on a NodeList.
Adding elements to a set is just
set.push.apply(set, arrOfElements);
Removing an element from a set is
set.splice(set.indexOf(el), 1)
You can't easily remove multiple elements at once :(
$("div:not(#myid)")
[doc]
or
$("div").not("#myid")
[doc]
are main ways to select all but one id
You can see demo here
var elements = $('div').not('#myid');
This will include all the divs except the one with id 'myid'
$('div:not(#myid)');
this is what you need i think.
That should do it:
$('div:not("#myid")')
You use the .not property of the jQuery library:
$('div').not('#myDiv').css('background-color', '#000000');
See it in action here. The div #myDiv will be white.
.get() converts a jQuery object to a DOM element that Javascript can use without jQuery.
If I have a DOM element, how can I convert it to a jQuery object?
jQuery core syntax accepts DOM elements: $(theDomElement).
jQuery( element )
element A DOM element to wrap in a jQuery object.
Recall that you're doing this every time you write $(this).
var myDOMElement = document.getElementById("myDomId");
var myDOMElementConvertedTojQueryObject = $(myDOMElement);