Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do you select a specific child div with jQuery?

How do you select a div which is a child of the current $(this)?

I have many divs with the class row, in each of which I have a hidden div called form_explanation. I want to show() the div form_explanation when the row is onClick-ed.

Thanks!

like image 710
Walker Avatar asked Jun 17 '10 19:06

Walker


People also ask

How do I select a specific child in Javascript?

querySelector() method on parent. Use the className of the child to select that particular child.

How do I see if a div has a specific child?

Use the querySelector() method to check if an element has a child with a specific id, e.g. if (box. querySelector('#child-3') !== null) {} . The querySelector method returns the first element that matches the provided selector or null of no element matches.

How do I select a specific tag in jQuery?

The jQuery #id selector uses the id attribute of an HTML tag to find the specific element. An id should be unique within a page, so you should use the #id selector when you want to find a single, unique element.

How do I select a specific class in jQuery?

In jQuery, the class and ID selectors are the same as in CSS. If you want to select elements with a certain class, use a dot ( . ) and the class name. If you want to select elements with a certain ID, use the hash symbol ( # ) and the ID name.

How do you get the children of the $( this selector?

Answer: Use the jQuery find() Method You can use the find() method to get the children of the $(this) selector using jQuery. The jQuery code in the following example will simply select the child <img> element and apply some CSS style on it on click of the parent <div> element.

How do you get children of children in jQuery?

jQuery children() MethodThe children() method returns all direct children of the selected element. The DOM tree: This method only traverse a single level down the DOM tree. To traverse down multiple levels (to return grandchildren or other descendants), use the find() method.


1 Answers

$('.row').bind('click', function () {
    $(this).children('div.form_explanation').show();
});

If you want to hide all other divs:

$('.row').bind('click', function () {
    $('div.form_explanation:visible').hide();

    $(this).children('div.form_explanation').show();
});
like image 126
Matt Avatar answered Oct 12 '22 16:10

Matt