I'm trying to pass "this" from a clicked span to a jQuery function that can then execute jQuery on that clicked element's first child. Can't seem to get it right...
<p onclick="toggleSection($(this));"><span class="redClass"></span></p>
Javascript:
function toggleSection(element) {
element.toggleClass("redClass");
}
How do I reference the :first-child of element?
This question is related to
javascript
jquery
jquery-selectors
css-selectors
Have you tried
$(":first-child", element).toggleClass("redClass");
I think you want to set your element as a context for your search. There might be a better way to do this which some other jQuery guru will hop in here and throw out at you :)
I've added jsperf test to see the speed difference for different approaches to get the first child (total 1000+ children)
given, notif = $('#foo')
jQuery ways:
$(":first-child", notif)
- 4,304 ops/sec - fastestnotif.children(":first")
- 653 ops/sec - 85% slowernotif.children()[0]
- 1,416 ops/sec - 67% slowerNative ways:
ele.firstChild
- 4,934,323 ops/sec (all the above approaches are 100% slower compared to firstChild
)notif[0].firstChild
- 4,913,658 ops/secSo, first 3 jQuery approaches are not recommended, at least for first-child (I doubt that would be the case with many other too). If you have a jQuery object and need to get the first-child, then get the native DOM element from the jQuery object, using array reference [0]
(recommended) or .get(0)
and use the ele.firstChild
. This gives the same identical results as regular JavaScript usage.
all tests are done in Chrome Canary build v15.0.854.0
If you want immediate first child you need
$(element).first();
If you want particular first element in the dom from your element then use below
var spanElement = $(elementId).find(".redClass :first");
$(spanElement).addClass("yourClassHere");
try out : http://jsfiddle.net/vgGbc/2/
element.children().first();
Find all children and get first of them.
please use it like this first thing give a class name to tag p like "myp"
then on use the following code
$(document).ready(function() {
$(".myp").click(function() {
$(this).children(":first").toggleClass("classname"); // this will access the span.
})
})
I've just written a plugin which uses .firstElementChild
if possible, and falls back to iterating over each individual node if necessary:
(function ($) {
var useElementChild = ('firstElementChild' in document.createElement('div'));
$.fn.firstChild = function () {
return this.map(function() {
if (useElementChild) {
return this.firstElementChild;
} else {
var node = this.firstChild;
while (node) {
if (node.type === 1) {
break;
}
node = node.nextSibling;
}
return node;
}
});
};
})(jQuery);
It's not as fast as a pure DOM solution, but in jsperf tests under Chrome 24 it was a couple of orders of magnitude faster than any other jQuery selector-based method.
This can be done with a simple magic like this:
$(":first-child", element).toggleClass("redClass");
Reference: http://www.snoopcode.com/jquery/jquery-first-child-selector
you can use DOM
$(this).children().first()
// is equivalent to
$(this.firstChild)
Use the children
function with the :first
selector to get the single first child of element
:
element.children(":first").toggleClass("redClass");
Source: Stackoverflow.com