Jquery Select element 2 positions further - another way to .next().next() - javascript

I am searching for a way how I could select a div element which is not the direct next one to the one which is "selected" by a click function.
<div id="click">(siblings)</div><div>text</div><div id="get this one"></div>
Now I would like to select the one with the id "get this one" - in my code this id is not available. All the divs have the same class and do have siblings.
I could select the third one by $(this).next().next() but I think it's not the best way to do it.
Also there can be divs before the one which is clicked - so it's not necessarily the first one.
I tried the :nth-child selector but didn't find a solution.
Later I also may want to select the 13th one after the click one (or the 23th, 65th and so on). This means I would like to have a rather dynamic solution to this problem.
Thanks for your help,
Phil

You can use .nextAll() with .eq() for your dynamic approach, like this:
$(this).nextAll().eq(1) //0 based index, this would be .next().next()
This would allow you to get n siblings forward, which seems to be what you're after.

It seems that $(this).parent().find('div').eq(2).attr('id') should work.
UPDATE( Added find('div') )

Related

What does this code means.?

I was checking out a project where this line have been used in jquery script. I don't know why this is used. Can anyone please help me why this code has been used? I can share whole function if you need.
$("#table_data").find("tr:not(:first)").remove();
Let's understand statement step by step
$("#table_data").find("tr:not(:first)").remove();
$("#table_data")
It finds the table with id (table_data)
$("#table_data").find()
this will find the elements on the basis of selector here as selector is "tr:not(:first)" so it will find all the tr except first one. Finally there is .remove() that will remove the selected rows.
So the complete statement will remove all the rows except first one
Inside of #table_data, it searches for all trs that are not the first children of their container (that is, for every container, it selects all trs except the first), and then removes them from the container.
It selects all elements that do not match the given selector
here is the official documentation
so what it does is, it find elements in a table that are not first in a row, and removes them.

Select next element of a given type after specified element

I am trying to select an element based on whether another element has a given ID containing certain text. The problem is that there are multiple elements with this same class name on the page and I only want to select the ones that have the element with this ID directly above them. Is this possible? I tried:
if ($(".element[id*='XYZ']").length > 0){
$(".element").nextAll('.elementoselect').text('Change the text');
}
My first instinct was to do it based on them being within the same DIV but the problems is that the DIVs are given classes when the page loads and they are generic, so this is the only other way I could think of.
Use chaining with the selector
$(".element[id*='XYZ']").nextAll('.elementoselect').text('Change the text');
If you use selector chaining , your oissue could be solved
$(".element[id*='XYZ']").nextAll('.elementoselect').text('Ch‌​ange the text')

How to select element has id start and end with specific text using jquery?

I have multiple divs with ids like course1_popup, course2_popup, course3_popup. I want to make a function something like
$('#course*_popup').hide();
so that all course*_popup divs should hide but this is not working. Any Ideas?
Use the combination of attribute starts with and ends with selectors.
$('[id^="course"][id$="_popup"]').hide();
FYI : It would be much better to use a common class for the group of elements for such things.
Easiest way: Give all the same class like course_popup and then:
$('.course_popup').hide()
Other solution was postet a sec ago ;)

:nth-child() not work on li added with foraeach data-bind

Im making a single page app on codepen.io (http://codepen.io/ntibbs/pen/ZbPPBm?editors=101) using knockout.js and jquery and while trying to figure out a way to select individual <li> elements that are added to my page using a foreach binding I noticed I can not use :nth-child() to do this. All the elements are considered :nth-child(1), not sure why its doing that. Are there any ways I could select an individual <li> element ?
The n in :nth-child() represents the depth, not the order. So :nth-child(1) selects every element that is the first child of its parent.
I'm not sure under what conditions you're trying to select a particular element, but I'll give you some options.
If each element already has a unique identifier, use that.
If you are already iterating through the set of elements, use logic in your loop to get the one you want.
If you can give me some more info on that, I can edit this accordingly.

How to change attribute of surrounding div/parent effectively?

I have a table with some radiobuttons in it. When i click on a radiobutton, i want to update two of the sorrounding containers ID attribute (a div and a table). The problem is, i need to go 4 and 6 levels up, and the only way i know how to do this is parent().parent().parent().parent() etc.
I am looking for a better solution, and was hoping someone could point me in the right direction. You can see an image of how the "parent-child" tree is here:
http://imageshack.us/photo/my-images/834/imgkz.png/
I already have a clickhandler etc set up.
Basicly i need to check if the table's id attribute is "answeredTable", if not i need to change it. Also i need to check if the div two levels up from the table is "answered", if not, i need to change that too.
Thanks
You can use .closest('#answeredTable') or .parents('#answeredTable').
Using .parent() only selects the first parent element upon the DOM tree, selecting .closest() will allow you to walk up to DOM tree and match until it finds the element, while .parents() will return the whole parentset of the DOM and match the element in the whole parentset.
You need to use .parents() that go through multiple level of the DOM
For instance, in your example, you could get the surrounding div with this code:
$("#Q_18_2015").parents("div#answered")
By the way, id should be unique, or else, your code might probably not work. You should use classes instead.
<div class="answered">
Thus, the code would become:
$("#Q_18_2015").parents("div.answered")
provided that Q_18_2015 is really a unique id
I think what you want to use is closest http://api.jquery.com/closest/
you can use .parents
$("element").parent(".parentClass")
parents will go up the DOM until finds the parent with class parentClass

Categories

Resources