We Keep Coding

how to get the index of the li clicked in javascript

Just using javascript, need to get the index of the li that's clicked with the following listener:
var ulList = document.getElementById('todo-list');
ulList.addEventListener('click', function(e){
if( e.target.nodeName == "BUTTON") {
//IS THERE A WAY INSIDE HERE TO GET THE INDEX OF THE li clicked
e.target.parentNode.remove();
}
});
each li looks like:
<li>
<input type="checkbox" value="1" name="todo[]">
<span class="centerSpan" style="text-decoration: none;">abc</span>
<button class="rightButton">X</button>
</li>

From the target (button, in this case) call closest() to get a reference to your li element
var li = e.target.closest('li');
Then get an array reference of your UL's children by using Array.from() and passing in the children HTMLCollection
var nodes = Array.from( ulList.children );
//or if you want to not depend on externally defined variables
var nodes = Array.from( li.closest('ul').children );
Finally call indexOf() to get the index
var index = nodes.indexOf( li );
If wanting to support old browsers will need to polyfill for methods like Array.from()

Use jQuery to find list items with matching class names in separate unordered lists

I have two unordered lists, each filled with list items that have a DYNAMIC class name. When I say "dynamic" I mean they are not generated by me, but they don't change once the lists have been created. These class names are id's I'm getting from an API, so they're just random numbers. A simple example would be something like...
<ul class="listA">
<li class="123"></li>
<li class="456"></li>
<li class="789"></li>
</ul>
<ul class="listB">
<li class="789"></li>
<li class="101"></li>
<li class="112"></li>
</ul>
What I'm trying to do is compare the two lists, and have any matches be highlighted, in this case the items with the class "789" would match. When I say highlighted, I just mean I'll probably apply some css after a match is found, like maybe a background color or something (not too important yet). The problem really lies in the fact that the lists can be somewhat long (maybe 50 items) and the classes are just random numbers I don't choose, so I can't do any specific searches. Also, there will most likely be cases with multiple matches, or no matches at all.
I'm pretty new to jQuery, so there may be a fairly simple answer, but everything I find online refers to searching by a specific class, such as the .find() method. If anyone needs more info or a better example, I'll be happy to give more info, I'm just trying to keep it simple now.
Thanks so much in advance!

var $first = $('ul.listA li'),
$second = $('ul.listB li');
$first.each(function(){
var cls = this.className,
$m = $second.filter(function(){
return this.className === cls;
});
if ($m.length) {
$(this).add($m).addClass('matched');
}
});
http://jsfiddle.net/b4vFn/

Try it this way:
$("ul.listA li").each(function(){
var listAval = $(this).attr('class');
$("ul.listB li").each(function(){
if(listAval == $(this).attr('class')){
//matched..
return false; //exit loop..
}
}
}

you can find the code here: jsFiddle
var listA=$('.listA li')
var listB=$('.listB li')
listA.each(function(){
var classInA=$(this).attr('class');
listB.each(function(){
var classInB=$(this).attr('class');
if(classInA === classInB){
console.log(classInA);
//now you found the same one
}
})
})

Demo at http://jsfiddle.net/habo/kupd3/
highlightDups();
function highlightDups(){
var classes = [] ;
$('ul[class^="list"]').each(function(k,v){
//alert(v.innerHTML);
$($(this).children()).each(function(nK,nV){
// alert($(this).attr("class"));
classes.push($(this).attr("class"));
});
});
hasDuplicate(classes);
}
//Find duplicate picked from fastest way to detect if duplicate entry exists in javascript array?
function hasDuplicate(arr) {
var i = arr.length, j, val;
while (i--) {
val = arr[i];
j = i;
while (j--) {
if (arr[j] === val) {
// you can write your code here to handle when you find a match
$("."+val).text("This is Duplicate").addClass("match");
}
}
}
}

A slightly less verbose variant of Nix's answer:
$("ul.listA li").each(function(){
var a = $("ul.listB li").filter("." + $(this).attr('class'));
if (a.size()) {
a.add($(this)).css("background", "red");
}
});

get text of the first li element from every ul

I have a lot of <ul> list and try to get from every first li of this list the text.
the markup is simple like:
<ul>
<li>abc</li>
<li>def</li>
<li>ghi</li>
</ul>
and so on.
my jQuery attempt is:
var elems = $('ul'); // returns a nodeList
var arr = jQuery.makeArray(elems);
arr.reverse(); // use an Array method on list of dom elements
for( var i=0; i < elems.length; i++) {
console.log($(this).find('li:lt(1)').text());
}
But I have a mistake in the for loop with $(this). I don't know how to get the first text of ul number 1 or 3 if i don't use $(this).
So how can point it correctly in the for loop?

.each will give you this.
$('ul').each(function() {
console.log($(this).find('li').eq(0).text());
})

Alternative sytax using :first instead of :eq(0)
$('ul').each(function() {
console.log($(this).find('li:first').text());
});
or, to forgo the find() function.
$('ul').each(function() {
console.log( $('li:first', this).text() );
});

you can also use:
$("li:nth-child(1)").each(function()
{
console.log($(this).text());
});
notes:
with :nth-child(n), all children are counted, regardless of what they are.
with :nth-child(n), n is 1-based (the first index is 1 instead of 0)

jQuery get index of certain child elements and ignore others

I'm trying to get the index of a child element ol, but there is also some h2's in there which I don't need and are therefore polluting my results when using the jQuery index() function.
So I need the index of the ol, as if there weren't any h2's at all. So that if you click on the 3rd ol the index will be 2 and not 4.
The HTML looks like this:
<div>
<h2>Title</h2>
<ol><li>Item</li><li>Item</li><li>Item</li></ol>
<h2>Title</h2>
<ol><li>Item</li><li>Item</li><li>Item</li></ol>
<h2>Title</h2>
<ol><li>Item</li><li>Item</li><li>Item</li></ol>
<h2>Title</h2>
<ol><li>Item</li><li>Item</li><li>Item</li></ol>
</div>
And the jQuery:
$('ol li').click(function () {
// get current index position of the ol
var itemIndex = $(this).parent('ol').index();
alert(itemIndex);
});

If I well understood, try this code
var ol = $('ol');
ol.find('li').click(function () {
var parentOl = $(this).parent('ol');
// get current index position of the ol
var itemIndex = ol.index(parentOl);
alert(itemIndex);
});
example jsbin : http://jsbin.com/enugex/1/edit

modify your code on jsfiddle
$('ol li').click(function (item,index) {
// get current index position of the ol
var itemIndex = $(this).parents('div').children('ol').index($(this).parent('ol'));
alert(itemIndex);
});

Try this
$(this).parent('ol').parent().children('ol').indexOf($(this).parent('ol'));

Count how many UL Elements there are in a Div with Javascript?

I am dynamically adding UL elements to a DIV element. I would like to be able to count how many UL elements there are inside the DIV so that once all the ULs are removed dynamically I can delete the DIV that they are contained in.
<div id="000">
<ul id="000-1">
<li>Stuff</li>
<li>Stuff</li>
</ul>
<ul id="000-2">
<li>Stuff</li>
<li>Stuff</li>
</ul>
</div>
Is there a simple Javascript solution that counts the amount of ULs so that I can do something like this.. ?
if(ulcount == 0){
var remove = document.getElementById("000");
remove.innerHTML = '';
results.parentNode.removeChild("000");
}
Thanks.

#Cheeso's answer is a good pure-JS solution. But, if you're using jQuery, the process can be made simpler.
jQuery('div#000').children('ul').length;
The above code will return the number of child ul elements of the div#000.
To update the count when you add elements dynamically, you will have to create a function and call it to update the number whenever a change occurs:
function countUls() {jQuery('div#000').children('ul').length;}
Bind that to an event so that it will be called when you want to update the number.

Code:
function getDirectChildrenByTagName(elt,tagname) {
var allChildren = elt.children, wantedChildren=[], i, L;
tagname = tagname.toUpperCase();
for(i=0, L=allChildren.length; i<L; i++) {
if (allChildren[i].tagName.toUpperCase() == tagname) {
wantedChildren.push(allChildren[i]);
}
}
return wantedChildren;
}
use it like this:
var zero = document.getElementById("000");
var uls = getDirectChildrenByTagName(zero, 'UL');
var ulCount = uls.length;
....

Try this:
var x = document.getElementById("000-1").querySelectorAll("li").length
console.log(">>>>", x);