get index out of selected elements - javascript

So I have a div with some child elements and when I select one with jQuery I want to get the index of it within a selector
<div>
<div class="red"></div>
<div class="red"></div>
<div class="red"></div>
<div class="blue"></div>
<div class="red"></div>
<div class="blue"></div>
<div class="blue"></div>
<div class="red"></div>
</div>
So lets say that I have the last element in the main div selected. If I call index() on it it will give me '7' because out of all the child elements the index is '7'. But now lets say I want to get the index based on the other 'red' elements, the goal is to return a value of '4' because out of all of the 'red' elements it is the fifth one. I looked through the documentation and didnt find a whole lot, then I experimented with putting selectors in the index() method like index('.red') but I couldn't get anything working.

Well, the documentation says:
.index( element )
element The DOM element or first element within the jQuery object to look for.
So can do:
selectedElements.filter('.red').index(this);
If you don't have selectedElements already, you can select corresponding siblings with, for example:
$(this).parent().children('.red')
If every element has only one class and then the filter can be dynamic:
var index = $(this).parent().children('.' + this.className).index(this);

Use the .index() function documented here
For the above if one wants to get the index of a element of the red class use $('div .red').index(elem);
$('div .red) will create a list of the elements with the red class within the div. .index(elem) will search for the elem within the array.

Running through all of them using id=test as parent
DEMO : http://jsfiddle.net/T7fXR/
$('#test > div').each(function(){
var thisClass=$(this).attr('class');
$(this).css('background',thisClass );
/* get index based on class*/
var idx=$('.'+thisClass).index(this);
$(this).text('Index= '+idx)
})

For me, this works just fine with your given HTML:
$('div').eq(5)​​​​​​​​​​.index('.red') // 3
You can place selectors into the .index() function.

Related

Get all child elements by className or querySelectorAll with Javascript

I searched a lot for an answer, but I didn't find any proper solution.
I'd like to get all HTML elements that are inside of all divs with the same className, but it is important all of them be part of the same collection, or array or anything that allow me to loop through it.
Let's say that I have two divs with a class called 'divTest', if I use querySelectorAll to reach it I will get a childList with two indexes, 0 for the first div and 1 for the second. It would give me all elements inside these divs, but they wouldn't be together. I'd like to access both indexes at once.
I am accessing each element by its index and putting it inside an array, where I spread both:
submits = document.querySelectorAll(".divTest")[0].children;
submits1 = document.querySelectorAll(".divTest")[1].children;
arrayTeste = [...submits, ...submits1]
It works, but I'd like to know if there is a direct way to do this, like accessing both indexes on the same code line?
Use .divTest > * to select all elements which are immediate children of an element with a divTest class:
console.log(
document.querySelectorAll('.foo > *').length
);
<div class="foo">
<div></div>
<div></div>
</div>
<div class="foo">
<div></div>
<div></div>
</div>

How to filter selector results by data attributes?

I want to show all users in
<div id="users>
<div class="item" data-username="ity">ity</div>
<div class="item" data-username="ity2">ity2</div>
<div class="item" data-username="ity3">ity3</div>
<div class="item" data-username="hello">hello</div>
</div>
My idea is simply to show/hide items whose data contains an username
ex: I want to show ALL divs that contains it so it should show 3 divs.
I tried with
$("div .item[data-username='it']").show();
The problem is it affects ONLY div elements whose data-username IS ity.
I also tried :contains
$("div .item[data-username:contains('it')]")
This is not good since it looks for the WHOLE div and not data-username ONLY
the 4th div will be shown as well since it contains "item" inside
Any idea ?
You can use the 'attribute contains' selector:
$("div .item[data-username*='it']").show();
Or the 'attribute begins with' selector, depending on your requirements:
$("div .item[data-username^='it']").show();
Also note that filter() can be used too, although this will be slower than the above methods:
$('div .item').filter(function() {
return $(this).data('username').indexOf('it') != -1;
}).show();
Not sure if it is a typo but your id "users" is not closed making the html invalid.
You could use some regex style selectors as below
$('div.item[data-username^="it"]')

javascript variable as selector in jquery to get specific child elements

I have the following structure in DOM:
<div class="parent">
<div class="child0"></div>
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
<div class="child4"></div>
<div class="child5"></div>
...
</div>
what i try to do in javascript is to show only specific elements and hide the others like this:
showItems(0,3,'.parent'); // show child 0,1,2
function showItems(offset,limit,component)
{
$(component).children().hide();
for(var i=offset;i<=(offset+limit);i++)
{
$(component+':nth-child('+i+')').show(); //!!! does not make them visible
}
}
any idea?
Thanks!
You need a space between component and :nth-child. because now you are selecting any element with class "parent" that's also the nth-child.
You should make it easier and use the .eq() method instead, like this:
function showItems(offset,limit,component)
{
$(component).children().hide();
for(var i=offset;i<=(offset+limit);i++)
{
$(component).children().eq(i).show(); //this will work!
}
}
Just to add to the answer by Remco, add '>' to make sure you select only one of the immediate childs.
So, one way can write
$(component+' > :nth-child('+i+')').show();
or even better
$(component+' > div:nth-child('+i+')').show();
If you do not place the '>' symbol, it can also select the elements inside child divs, if it is present.

jQuery select child of closest element

Basically I want to be able to select the div level2 parent from the child level4 div. My application does not has such classes, otherwise I'd just select level2 :)
<div class="level1">
<div class="level2">
<div class="level3">
<div class="level4"></div>
</div>
</div>
<div class="level2"> <!-- this is hidden -->
<div class="level3">
<div id="start" class="level4"></div>
</div>
</div>
</div>
I start with $('#start') and search for the first parent which is visible, but I'm not seeing a way to return the child of that parent. Searching for $('#start') inside the parent seems very wasteful as I start with a sub child to begin with.
$('#start').closest(':visible') // returns level1
$('#start').closest(':visible').first() // returns the first level2. I can't just use second because the number of level2s can change.
$('#start').closest(':visible').children().each(function(){ /* do some search to check it contains `$('#start')` }) // seems very wasteful.
Another way to look at what I'm trying to say would be; start in the middle, find the outside (the visible element), and move one element in.
How about this:-
$('#start').parentsUntil(':visible').last();
This will give you all hidden parent div's until its visible parent and last() wil give the outermost parent which is hidden. last is not a selector on position it is the last() in the collection.
You want the .has() method
Description: Reduce the set of matched elements to those that have a descendant that matches the selector or DOM element.
$('#start').closest(':visible').children().has('#start');
See fiddle for example.
You say that the classes don't exist...why not add them? It would make thinks much easier to find. The class names don't need to have actual styles associated.
var allLevel4 = $('#start').closest(':visible').find('.level4');
var firstLevel4 = $('#start').closest(':visible').find('.level4')[0];
var secondLevel4 = $('#start').closest(':visible').find('.level4')[1]; //also, #start
Use .filter():
$('#start').closest(':visible').children().filter(':first-child')
.find() is also good for selecting pretty much anything.

find index of child using jQuery?

If I have an html structure like:
<div id="parent">
<div class="child first">
<div class="sub-child"></div>
</div>
<div class="child second">
<div class="sub-child"></div>
</div>
<div class="child third">
<div class="sub-child"></div>
</div>
</div>
and I have a click handler defined through ($('#parent.child')).click() and then I click on the div with the class of second (first, second, third classes have simply been added to make demo clearer) is there a simple way to get the number 1 as it is the second child? (0 based index)?
Something like $(this).index
Just have a look at the jQuery API. The method you suggest, index, is exactly right:
$('#parent .child').click(function() {
var index = $(this).index();
});
From the docs:
If no argument is passed to the .index() method, the return value is
an integer indicating the position of the first element within the
jQuery object relative to its sibling elements.
Also note that I've changed the selector slightly from your example. I'm guessing that was just a typo in your question though. #parent.child will look for an element with ID "parent" and a class of "child", but you actually want #parent .child (note the space) to find elements with class "child" that are descendants of an element with ID "parent".
The index() method can be used for getting the position of an element inside a collection. In basic circumstances, $(this).index() should work.
But with more specific collections, you can get the position with collection.index(item). Imagine adding something simple into your #parent that should not be counted when measuring index() (a span, img, anything). With the simple method, your code is likely to break, but with the specific method, it won't.
Something like this should work for you:
var $children = $('#parent .child').click(function​ () {
console.log($children.index(this));
});​
jsFiddle Demo

Categories