Getting ALL First links in a specific class - javascript

So I know that using "a:first" will get the first link of a page. Lets assume we have the following:
<div class="masterclass">
Link 1
Link 2
</div>
<div class="masterclass">
Link 1
Link 2
</div>
Naturally I can use the following code to get the first "a" of the class "masterclass"
$('.masterclass a:first').click(function() {
alert('yayfirstlink');
});
However I do not understand how to get the first link of every "masterclass"

You need to use find() here because your selector will find all the anchor elements with in .masterclass then filter only the very first one. But when you use .find(), it will find all the .masterclass elements first then will find the first anchor element in each of them.
$('.masterclass').find('a:first').click(function() {
alert('yayfirstlink');
});
or if you are sure that the target element will be the first child of its parent then you can use :first-child
$('.masterclass a:first-child').click(function() {
alert('yayfirstlink');
});

Try this,
var oFirstAnchor = $(".masterclass a:first-child");

$(".masterclass a:first-child") is what you are looking for.
so:
$('.masterclass a:first-child').click(function() {
alert('yayfirstlink');
});

This is how u loop through each of the masterclass and get the first link of it.
i don't know what you want to do with it though so i can only provide this
$(document).ready(function(){
var fields = $('.masterclass a:first-child');
$.each(fields, function(index, val){
alert(index);
});
});
this alerts the current links array index
http://jsfiddle.net/kBd82/6/

I would recommend using the first of type selector for this.
$('.masterclass a:first-of-type')
This way it will always select the first anchor tag in each masterclass div even if you put other things in the div later.
http://api.jquery.com/first-of-type-selector/

Related

Store jQuery in a variable

I've got an FAQ page I'm building. Next to the question, there is a plus sign to expand the content. On click, I've added the class active, but there are many questions, and I don't want to repeat the same jQuery snippet for each question. I've figured out how to find the parent ID but I'm having trouble storing it in an variable to reuse in the jQuery script.
What I want to be able to do:
var element = $(this).parent().parent().attr('id')
$('.expand').click(function(){
$('element .expand').toggleClass('active')
})
Is there a way to do this? I get undefined when I do this:
$('.expand').click(function(){
console.log(element)
});
You can use the find() function to locate children of a selected element:
var element = $(this).parent().parent().attr('id')
$('.expand').click(function(){
$("#" + element).find('.expand').toggleClass('active')
});
However, looking at your code, it seems like you just want to toggle the "active" class of the clicked element. If that is the case, you can do this much more simply without a variable at all:
$('.expand').click(function(){
$(this).toggleClass('active')
});

jquery select multiple while traversing DOM

I am trying to select all elements with the "findme" class, and from those get the selects that are nearby them.
http://jsfiddle.net/R93md/1/
Specifically I have tried
$(".findme").parent().prev().first();
then once I have all selects I plan on doing a
.each(function (){doSomething(this);})
to each select. I am stuck getting the selects because it seems that I am never going down and retrieving the contents of the span.
$(".findme").closest("td").find("select").each(function() {
doSomething(this);
});
I think you should follow this:
$('.findme').each(function(){
var el = $(this).closest('td').find('select');
dosomething(el);
});
I would first grab the parent <td> element and then use find() like so
$('.findme').parents('td').find('select').each(function(){
...
});
http://jsfiddle.net/JYGK3/
Edit:
In review of the other answers here, I've concluded that you probably should use closest() rather than parents(). If the table is nested, it could produce unwanted results.
http://jsfiddle.net/JYGK3/1
You can use .closest() to go up to the common <td> and then .find() to go down from there to find the neighboring <select>:
$(".findme").each(function() {
var select = $(this).closest("td").find("select");
// now do what you want to with the neighboring select object
// here you have access to both this which is the findme object
// and select which is the select object
});

jQuery CSS Selector combined with "this"

I'm trying to figure out if something like this would be possible. We are given that HTML structure
<a href='#' class='anyLink'>
<!-- here goes some content-->
<div class='childElement'><!-- here goes some content--></div>
</a>
I am not able to use ID's because there are many links and it's not defined how many more are to come. So my question is, do you guys know a way where I can do something like this :
$('a').on("click",function(e){
$(this +"div").val(); // for example.
});
I want to select a children element of that anchor that has been clicked or want to get the value of the children element. I also don't have any ID's of the children elements and I am trying to select things via CSS Selectors as td:nth-child(4).
Could anybody tell me if this is possible ?
try
$('a').on("click",function(e){
$("div",this).text(); // for example.
});
$('a').on("click",function(e){
$(this).children("div").eq(0).html();
});
You are looking for a function called .children().
But you can also try something like this:
$('a').on('click', function( e ) {
$('div', this).val(); // Each div child of this element
$(this).children('div'); // Each div child of this element
});

jquery: Finding the last child from a selector

For example, I've got a selector here
var $myNeeds = $('.history');
This selector would have multiple divs inside, and now I want to get the last child from it, how to do this?
I tried $myNeeds.last(), this won't work!
Alternatively....
$myNeeds.find('>:last-child')
jsFiddle.
You're almost there...
$myNeeds.children().last()
The last method gets the last element in your set.
You want the last child of your set, so you need to get a new set with the children.
You could also write
$('.history > :last-child')
or
$myNeeds.children(":last")

How to gain access to an element on the same level in the DOM?

<div id="dad">
<img id="mum">
<input>
</div>
With jQuery, how could i get access to the input element, get is value or set it for example? I can't work out how to access something on the same level.. and i dont want to be using ID's, just parent/child nodes so i can use the code for loads of dad div's
Thanks!
an addition to Zed,
$(this).parent().children('input');
if you give a name to your input field then you can easily select throughout the others,
$(this).parent().children('input[name=my_input]');
then you can give any value as:
$(this).parent().children('input[name=my_input]').val('any value');
Sinan.
var myEl = $("#dad").children(":input");
$(this).parent().children() ?
Try this, to find the first child input element:
jQuery("div").find("input:first")
If i understand question, you would like achieve input from mum leve?
So try $("#mum ~ input")...
BTW, great site to search jquery function by category http://visualjquery.com/ +nice example.
I guess you want to find siblings (node with same depth and same parent and in DOM tree)
$(el).next() - next element (sibling) for all elements in the set
$(el).nextAll - all following siblings
$(el).nextUntil - all following siblings, stop on some condition (not including first "bad match").
Besides, you have next adjacent selector (+) and next sibling selector.
The same about prev, prevAll and prevUntil.
And you even have a siblings method.
Check this out.

Categories