Find the first parent of a selector - javascript

Consider this sample html
<div class="A">
<div class="B">
<span class="C">Sample text</span>
<div class="D">
<div class="E">Clickable Text</div>
</div>
</div>
</div>
And some jQuery
$(".E").click(function(){
//body
});
What is the easiest way to get a parent of $(this) that matches a selector? For example, say in the example I need to get the div where class="A". At the moment because I know the structure of the html I could do
$(this).parent().parent();
But I'm looking for a way that would work regardless of the structure. Something along the lines of
$(this).findFirstParent(".A");
I hope I've been understandable.

$(".E").click(function(){
console.log($(this).closest('.A'));
/* console.log($(this).parents('.A')); works fine too */
});
See
http://api.jquery.com/closest/
http://api.jquery.com/parents/
Note that parent() is different than parents() method (the first one look for one ancestor only)

First Solution:
$(this).closest('.A')
Source: http://api.jquery.com/closest/
This will return the first parent when traversing that matchs the selector.
Second solution:
$(this).parents('.A:first')
Source: http://api.jquery.com/parents/
This will return all the parents that matches the selectors

What about
$(this).closest(".A");

This is the way i would do it
$(this).parents("div.A")

The jQuery parent selector might help you there. You can combine it with the class you are looking for. See the docs #
http://api.jquery.com/parent-selector/

Related

Move element before second to last h2 with jQuery

I am trying to move an elmement with class .books_inarticle_list from its native possition tu just before the second to last H2.
I am using the following which is not working:
$('.books_inarticle_list').insertBefore('#content_column > h2:nth-last-child(2)');
On the other hand something like this works:
$('.books_inarticle_list').insertBefore('#content_column > h2:nth-of-type(6)');
So the issue must be with the nth-last-child() selector, but I don't see what it might be.
Does anyone see anything wrong with that code or knows an alternative way to move that element to just before the second to last H2 tag?
Try the .get() method, which supports negative numbers to go in reverse.
$('.books_inarticle_list').insertBefore($('#content_column > h2').get(-2));
Edit On second thought, it makes more sense to follow your own examples and use the :nth-last-of-type() selector, which will go in reverse.
$('.books_inarticle_list').insertBefore('#content_column > h2:nth-last-of-type(2)');
The reason :nth-last-child() isn't working for you is because that, and :nth-child(), refers to the number of siblings they have in the DOM, not the list of elements returned by the selector.
You'd be better off providing your HTML for the optimal solution, however given your question I'd suggest something like the following:
var $h2s = $("#content_column > h2");
var $secondToLast = $h2s.eq($h2s.length-2);
$('.books_inarticle_list').insertBefore($secondToLast);
I passed on using nth-child just because that will be thrown off any time you modify your HTML structure.
Note, :nth-* selectors use 1-based indexing. You can use :nth-last-of-type() selector with 2 as parameter to selector second from last element of that type, chain .before() with $(".books_article_list") as parameter.
$("#content_column h2:nth-last-of-type(2)").before($(".books_article_list"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="books_article_list">books</div>
<div id="content_column">
<h2>0</h2>
<h2>1</h2>
<h2>2</h2>
<h2>3</h2>
<h2>4</h2>
<h2>5</h2>
<h2>6</h2>
</div>
i prefer to use ":eq" even ":nth-of-type". So will be :
$('.books_inarticle_list').insertBefore('#content_column > h2:eq('+($('#content_column > h2').length()-2)+')');

How do I access a sub-element when using $(this) in jQuery

I have the following code:
$(document).ready(function(){
$(document).on('click', '.mydiv', function(){
console.log(??????);
});
});
I also have the corresponding html
<div class="mydiv">
<p>Hello from inside a mydiv</p>
</div>
<div class="mydiv">
<p>Hello from inside some other mydiv</p>
</div>
My goal is to print the text inside the p tags to the console when the I click on any div with the class of mydiv. I know that this means I should be using the $(this) operator, but when I do that I am unsure of how to then access its sub elements.
I know if I were using id's (or if I only had one of these class objects) I could simply do $('#mydiv p').val(), but I'm unsure of how to achieve this when I'm using $(this).
You can use $('p',this) or $(this).find('p') to get p tag element in this context:
$(document).on('click', '.mydiv', function(){
console.log($('p',this).text());
});
Working Demo
Using $(this) and jQuery's .find() you can get the child elements that you choose:
console.log($(this).find('p').html());
There are multiple ways to go about this. One of the ways has been mentioned here by others (the find method). The problem with the find method is that it finds all elements inside your div and not the direct children. So, if you have elements that are nested another level, it gets that as well.
With the children method, it will find the direct child of the element, but not anything nested deeper.
<div class="mydiv">
<div>
<p>Nested p</p>
</div>
</div>
$('.mydiv').find('p'); // Finds this element, but children() will not
Versus
<div class="mydiv">
<p>
Direct p
</p>
</div>
$('.mydiv').children('p'); // Will find this element, but find() will as well
With the find method, you will find the one nested inside the second div, whilst with the children method, you will find only the direct child.
Depending on your needs, you may use find or children

How to get one of preceeding elements in jQuery

My html structure is like below :
<header></header>
<div id="take-113"></div>
<div id="take-114"></div>
<div id="take-115"></div>
How can I find same header from each div?
$("take-113").prev("header"); // works
$("take-114").prev("header");// doesn't work
$("take-115").prev("header"); // doesn't work
See jquery .prevAll()
$("take-115").prevAll("header:eq(0)");
prev only selects the previous sibling of the element, you can use prevAll() method:
$("#take-114").prevAll("header").first();
if you have more then one header then you can define which one you want to get
$("take-113").prevAll("header:first");
$("take-114").prevAll("header:first");
$("take-115").prevAll("header:first");
$("take-113").prev("header"); // works
$("take-114").prev("header");// doesn't work
$("take-115").prev("header"); // doesn't work
replace this by
$("#take-113").prev("header");
$("#take-114").prev("header");
$("#take-115").prev("header");

How to look for a parent element which contains a specific selector

Let's suppose to have the following html structure (1).
From $('.child') element I can access the $('.gran-parent') element making something like $('.child').parent().parent();.
Anyway I don't think this is a good way because is not generic.
Let's suppose there are other divs between $('.gran-parent') and $('.child').
What is the most generic way to refers to the first parent which class is gran-parent, starting from $('.child') ?
<div class='gran-parent'>
<div class='parent'>
<div class='child'>
</div>
</div>
</div>
You want:
$('.child').closest(".grand-parent");
.closest will keep traversing up until it finds a .grand-parent. You can also do .parents(".grand-parent") but that could return more than one result, depending on your DOM hierarchy, so you would have to do:
.parents(".grand-parent").eq(0)
or:
.parents(".grand-parent").slice(0)
or:
.parents(".grand-parent:first")
all of which are less elegant than .closest().
See:
http://api.jquery.com/closest/
http://api.jquery.com/parents/
You're looking for the .parents() operator.
Example:
$('.child').parents('.gran-parent');

Jquery find all except

I have following HTML:
<div id="123" class="test">
<div class="testMessage">Foo</div>
<div><div class="testDate">2010</div></div>
<div id="127" class="test">
<div class="testMessage">Bar</div>
<div><div class="testDate">2011</div></div>
</div>
</div>
And I have following JS/jQuery code:
$(".test").find(".testDate").val("cool 2010");
How to change JS/jQuery to find "testDate" class element except in children "test" class block without using children?
P.S. I know only about class name and I don't know how many divs can be nested.
Update
Its probably the weirdest selector I've ever written:
$("div.test").not(':has(> .test)').siblings().find('.testDate').text('cool 2010');
Demo: http://jsfiddle.net/mrchief/6cbdu/3/
Explanation:
$("div.test") // finds both the test divs
.not(':has(> .test)') // finds the inner test div
.siblings() // get all other divs except the inner test div
Try this and also div elements do not have a value property, use html() method to set the inner html or text()
$("div.test :not(.test)").find(".testDate").html("cool 2010");
If you can modify your main div id to "_123", you can straight away use the id selector like this
$("#_123 > div.testDate").html("cool 2010");
I think the not() selector might help. You can learn more about it here: http://jsperf.com/jquery-css3-not-vs-not
Anytime you try to select $('.test'), it will grab all elements with a class='test'. You need to start at the outermost body tag:
$('body').children('.test').children(':not(.test)').find('.testDate').text('cool 2010');

Categories

Resources