jQuery for this parent's next sibling's 3rd child.

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
drayarms
Forum Contributor
Posts: 134
Joined: Fri Dec 31, 2010 5:11 pm

jQuery for this parent's next sibling's 3rd child.

Post by drayarms »

Hello fellows, I'm a relative newbie at jQuery which I started learning as an alternative to JavaScript and all its annoying cross browser incompartibility issues. Well I'm trying to create selectors for a current element's distant relative for example, I need a constructor for an element's parent's next sibling's second child. Well here's what I came up with

Code: Select all

$(this).parent().next().children().get(1)


I wonder if that makes any sense at all. I'm hoping it does. If not, who can show me how to construct this selector. Also what if I wanted to make things a little bit murkier for example, what if I wanted a constructor for this element's parent's 3rd next sibling's second child? Can someone please show me how to do that?
KCAstroTech
Forum Commoner
Posts: 33
Joined: Sat Aug 27, 2011 11:16 pm

Re: jQuery for this parent's next sibling's 3rd child.

Post by KCAstroTech »

Assuming that you are calling that from within an event call where "this" is the target element, that should work. E.g.

Code: Select all

$('.my_buttons').click(function(){
  $(this).parent().next().children().get(1);
}
Otherwise if you are calling it in the body of the script then "this" references the window and the call will fail.

To get 2nd child of the 3rd sibling of the parent you can use:

Code: Select all

$(this).parent().next().next().next().children().get(1);
There are other options such as getting the parent's siblings then getting the index() of the parent plus the offset, though unless you need the 4th sibling or more then simply using .next().next().next() would be easier and faster. e.g.

Code: Select all

$(this).parent().siblings().get($(this).parent().index()+2).children().get(1)
And note how I use 2 to get the 3rd sibling as siblings() returns all siblings save for the target itself, thus the element in the index position of the siblings() would the first sibling after the target.

I use Google Chrome as my default browser, and what I find most useful is its developer tools which you can bring up by pressing (Control + Shift + i) or going to Settings -> Tools -> Developer Tools. On the page that I want to play with my jQuery commands in real-time, I go to the console tab of the developer tools, and type in the jQuery command I want to test. In your situation I would test it out first on a known target like so:

Code: Select all

jQuery('#my_button_1').parent().next().children().get(1);
If it works then the console should now display the jQuery object for the desired element. Hope this helps!
drayarms
Forum Contributor
Posts: 134
Joined: Fri Dec 31, 2010 5:11 pm

Re: jQuery for this parent's next sibling's 3rd child.

Post by drayarms »

@kcastro, thanks for all the tips. I'm going to try them out. But when you say calling within the body of the sscript, did you mean within the body tag? Because my idea was to actually call it from within the target tag itself. I don't see why the function will fail if the selector is valid. For exaple, here is a situation where I successfully used the this selector within the target tag.

Code: Select all

<html>





	<head>





		<title> Slide up and down </title>





		<script type = "text/javascript" src="http://code.jquery.com/jquery-latest.js">


		</script>





		





	</head>











	<body>





		<h1>Slide Paragraphs up and down</h1>





		<div>





			<p id onclick = "$(this).slideUp('slow')"> This is paragraph 1.</p>








			<p> This is paragraph 2.</p>





			<p> This is paragraph 3.</p>





			<p> This is paragraph 4.</p>





		</div>








		








	</body>





	





</html>	
KCAstroTech
Forum Commoner
Posts: 33
Joined: Sat Aug 27, 2011 11:16 pm

Re: jQuery for this parent's next sibling's 3rd child.

Post by KCAstroTech »

:-D That would be within a click event so that should work! By body of the script I was referring to something like this:

Code: Select all

<script type="text/javascript">
$(this).parent().next().children().get(1);
//Or inside a function
function do_something(){
$(this).parent().next().children().get(1);
}
do_something(); // Generic call to do_something();
</script>
In both cases "this" references the window element. With the command being inside a click event as you show above, the event target (the paragraph element) becomes "this" and will work.

Also, if what you are after is a drag and sort ability, be sure to take a look at jQueryUI (http://www.jqueryui.com) as they have a built in sort plugin that might make your job easier (http://jqueryui.com/demos/sortable/).
drayarms
Forum Contributor
Posts: 134
Joined: Fri Dec 31, 2010 5:11 pm

Re: jQuery for this parent's next sibling's 3rd child.

Post by drayarms »

thanks dude. i'll give it a look.
Post Reply