We Keep Coding

Javascript: Selecting List from UL

var ul = document.getElementById("parent-list");
document.querySelectorAll("#parent-list li").onclick = function() {
alert('click!');
}
<ul id="parent-list">
<li id="item-1">Item 1</li>
<li id="item-2">Item 2</li>
<li id="item-3">Item 3</li>
<li id="item-4">Item 4</li>
<li id="item-5">Item 5</li>
<li id="item-6">Item 6</li>
<li id="item-7">Item 7</li>
<li id="item-8">Item 8</li>
<li id="item-9">Item 9</li>
</ul>
I'm trying to have an alert popup of the item clicked when I click on a "li" element with javascript only. I know how to do in jquery but I can't figure out how to do it with javascript.
fiddle: https://jsfiddle.net/7jcksznz/1/

querySelectorAll returns an HTML collection. You would need to attach the event to each one. You would need to loop over the collection.
var lis = document.querySelectorAll("#test li");
for (var i = 0; i < lis.length; i++) {
lis[i].addEventListener("click", function() {
console.log(this.innerHTML);
});
}
<ul id="test">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
A better option is to add one click on the UL and use the event to determine which li was clicked.
document.getElementById("test").addEventListener("click", function(event) {
var li = event.target;
console.log(li.innerHTML);
});
<ul id="test">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>

document.querySelectorAll("#parent-list li") get a collection of HTMLElement,so,you can do like this：
window.onload = function()
{
var ul = document.getElementById("parent-list");
ul.onclick = function(e)
{
if(e.target.tagName = "LI")
{
alert(1);
}
}
}

querySelectAll returns array of nodes.
you have to iterate over the nodes to add the event listner.
var ul = document.getElementById("parent-list");
var li_items = document.querySelectorAll("#parent-list li");
for (var i = 0 ; i < li_items.length ; i++)
li_items[i].onclick = function (){alert(this.id);}

Use an event-listener targeted on each element rather than directly assigning an onclick function to a NamedNodeMap.
/* get an array of list items */
var items = Array.prototype.slice.call(
document.querySelectorAll('li[id|="item"]')
);
/* add event-listener to each item */
items.forEach(function(item) {
item.addEventListener('click', clickAlert, false);
});
/* click function */
function clickAlert(evt) {
alert(evt.target.id +' clicked!');
}
See:
Array.prototype.slice
Array.prototype.forEach
eventTarget.addEventListener
NamedNodeMap

Select jquery elements except specific children

This is a simple question, but, I haven't found a clear answer in any of the question that I found. I modified a JSFiddle for my specific question.
I got this tiny code:
<ul>
<li id='one'>Element 1</li>
<li id='two'>Element 2</li>
<li id='three'>Element 3</li>
<li id='four'>Element 4</li>
<li id='five'>Element 5</li>
</ul>
and this script should return the ul element excepting the first li:
$(function(){
$("ul").not($('#one'))
});
Instead, it removes every li. What have I done wrong?
EDIT: In others words, I would like a selector which selects this, without removing the actual element (= inside a variable)
<ul>
<li id='two'>Element 2</li>
<li id='three'>Element 3</li>
<li id='four'>Element 4</li>
<li id='five'>Element 5</li>
</ul>
FIDDLE: http://jsfiddle.net/LVUMs/13/

Use
$("ul li").not($('#one')).remove();
DEMO
OR
$("ul li:not(#one)").remove();
DEMO 2
EDIT
You need
var ulexceptOneLi = $("ul li:not(#one)");
or
var ulexceptOneLi = $("ul li").not($('#one'));

Try this code:
Fiddle
$(function(){
$("ul>li").not($('#one')).empty();
});

Assuming you meant to keep the ul in play:
$("ul li#one").remove();
Here's a fiddle...
If you're wanting to return a ul element with the removed element inside, try this:
function do_crazy_thing(){
var removed = $("ul li#one").remove();
return $('<ul></ul>').append(removed);
}
do_crazy_thing();
Here's another fiddle...
Here's how you would then append your new ul element to the body...

Demo Fiddle
According to your question, your expected output is :
<ul>
<li id='two'>Element 2</li>
<li id='three'>Element 3</li>
<li id='four'>Element 4</li>
<li id='five'>Element 5</li>
</ul>
Check the demo.
Edit :
$(function(){
var removed = $("ul li:not(#one)");
});
OR
var op = $("ul :not(#one)");

Please try below JS code
$(function(){
var test= $("ul li").remove("#one");
});

Selecting the .index() of a deeply nested element

I want to select the tags onlu inside a by the index shown in the link names. What is the best method of doing this?
<div class="index-get">
<div class="column">
Category Title
<ul>
<li>Index 0</li>
<li>Index 1</li>
<li>Index 2</li>
<li>Index 3</li>
<li>Index 4</li>
</ul>
</div>
<div class="column">
<ul>
<li>Index 5</li>
<li>Index 6</li>
<li>Index 7</li>
<li>Index 8</li>
<li>Index 9</li>
</ul>
</div>
</div>
$('.index-get ul a').click(function(){
var aIndex = $(this).index();
console.log(aIndex);
});

var aIndex = $('.index-get li a').index($(this));
and you should cache $('.index-get li a') outside of the event handler
var $lia = $('.index-get li a');
$lia.on('click',function() {
console.log($lia.index($(this)));
})

Not sure if the question is clear enough but here is something that might relate to what you need:
$('.index-get ul a').click(function(){
var aIndex = $(this).text();
console.log(aIndex);
});
And the fiddle.
EDIT
I think I finally got it the question sigh... :-)
Since there is only one A inside each parent LI the index of A tags will always be 0 in your example because the index is in relation to the sieblings...
If you calculate the index for the LI you might get better result. But keep in mind the index is only counted inside each parent so for the two ULs you will get two sets of LI children hence clicking Index 1 or Index 6 will yield the same result.
New Fiddle
One more edit
Actually the ULs are nor sieblings and one must go above to the DIV and down again into the ULs to be able to count the LI of previous items... But I guess it works just perfect for your needs. I I understood your needs that is... ;-)
$('.index-get ul li').click(function(){
var aIndex = $(this).index()+$(this).parent().parent().prev().find("ul").children().length;
console.log(aIndex);
});
And the fiddle.
Last edit
Making the line slightly simpler
var aIndex = $(this).index() + $(this).parent().parent().prev().find("ul li").length;
&(this) is an LI element.
$(this).parent() is the UL
$(this).parent().parent() is the DIV
$(this).parent().parent().prev() are all the sibling elements of that DIV (hopefully only DIVs in there and all with the same type of content)
$(this).parent().parent().prev().find("ul li") all LI inside UL inside sibling DIVs.
$(this).parent().parent().prev().find("ul li").length; the number of LI in the previous line.
There you go. Simple logic! ;-)
And when you think all is done and settled... There comes one more edit!!! :-)
I was thinking of the solution I proposed and it will eventually fail if you have more then two UL groups and if you click on a LI located in the third UL or later.
Therefore I have created yet another solution which uses .prevAll() instead of just .prev() but then must use the .each() with a function to add up all the count of all LI elements from the previous ULs.
Fiddle
Now I can go sleep in peace! :-)
Fabricio

Try this code:
$('.index-get ul a').click(function(){
var aIndex = $(this).text().match(/\d+$/)[0];
console.log(aIndex);
});

This should work no matter how deep the li's are nested:
var items = $('li');
items.on('click', function() {
var clicked_item = $(this);
items.each(function(index){
if ($(this).is(clicked_item)){
console.log(index);
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="index-get">
<div class="column">
Category Title
<ul>
<li>Index 0</li>
<li>Index 1</li>
<li>Index 2</li>
<li>Index 3</li>
<li>Index 4</li>
</ul>
</div>
<div class="column">
<ul>
<li>Index 5</li>
<li>Index 6</li>
<li>Index 7</li>
<li>Index 8</li>
<li>Index 9</li>
</ul>
</div>
</div>

Javascript/jQuery - On hover over a li element, change class of another li element

i am having some trouble with the menu bar on this website: http://www.re-generation.ro/ro/campanii/minerit-aurifer .
Now, the second li element is active. What i want to do, is that on hover over any other li element in the menu, the class of the current active li element becomes blank and on on hover out, it becomes active again. If you visit the link you can easily understand what i what.
If you need any information pls ask.
thank you in advance!
My code:
var lis = document.getElementsByTagName('ul');
for (var i=0, len=lis.length; i<len; i++){
lis[i].onmouseover = function(){
var firstDiv = this.getElementsByTagName('li')[1];
firstDiv.className = '';
var ul = $(this).parent(document.this.getElementsByTagName('ul')[1]);
ul.className = '';
};
lis[i].onmouseout = function(){
var firstDiv = this.getElementsByTagName('li')[1];
firstDiv.className = 'active';
};
};
EDIT: Thank you all for your answers! That really helped!

The first thing you probably want to do is assign two different states/classes: active and current. One tells you which one should be shown, and the other actually toggles the visibility.
$('#menu').on('mouseover', '> li', function(e) {
# attach hover event to the menu, and check which LI you are hovering
if (!$(this).hasClass('.current)')) {
$('.current', '#menu').removeClass('active');
}
}).on('mouseout', '> li', function (e) {
if (!$(this).hasClass('.current)')) {
$('.current', '#menu').addClass('active');
}
});
Here you are selecting just the direct descendants and updating the class, provided it's not the currently active list item.

HTML:
<ul id="menu">
<li>Item 1</li>
<li class="current active">Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>​
JavaScript:
$('#menu li').on('mouseover', function() {
var li$ = $(this);
li$.parent('ul').find('li').removeClass('active');
li$.addClass('active');
})
.on('mouseout', function() {
var li$ = $(this);
li$.removeClass('active');
li$.parent('ul').find('li.current').addClass('active');
});​
DEMO

I would use JQuery for this. Something like this:
$('li').hover(function(){
$('li.active').removeClass('active').addClass('normal');
});
$('li').mouseleave(function(){
$('li.normal').removeClass('normal').addClass('active');
});

What you're missing is a way to remember what the default state is. Here is my answer, and a Fiddle
HTML:
<ul class="menuWithDefault">
<li>Link One</li>
<li class="active">Link One</li>
<li>Link One</li>
<li>Link One</li>
</ul>
Javascript:
$(".menuWithDefault").each(function() {
var defaultItem = $(this).find(".active").first();
$(this).find("li").hover(function() {
defaultItem.toggleClass('active', false);
$(this).toggleClass('active', true);
}, function() {
$(this).toggleClass('active', false);
defaultItem.toggleClass('active', true);
});
});​
​

$(document).ready(function(){
$('li').hover(function(){
$(this).addClass('active').siblings().removeClass('active')
});
});
li.active{
color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="active">List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
</ul>

Prototype insert after

I'm trying to break up an unordered list containing eight items into two lists, each containing four items.
I figured that .inserting closing and opening tags after the fourth list item should cut it:
if(i == 3) {
$(li).insert({
after: "</ul><ul>"
});
}
But Prototype gives me the <ul></ul> in the opposite order.
<ul>
<li />
<li />
<li />
<li />
<ul></ul>
<li />
<li />
<li />
<li />
</ul>
Is there a simple answer to this one?

Here's how I would do it
Html:
<div id="list">
<ul id="original">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
Javascript:
var ul = new Element('ul');
$$('#original li').each(function(li, index) {
if (index % 3 == 0 && index > 0) {
$('list').insert({
bottom: ul
});
ul = new Element('ul');
}
ul.insert({
bottom: li
});
});
$('list').insert({
bottom: ul
});
$('original').remove();
Look at a live example

Use JavaScript's MOD operator to see when you are on the first or 4th row. If you are, create the UL element and then add the LIs to this element.
Something like:
if ( i % 4 == 0 ) {
currentUl = new Element('ul');
$('li').appendChild(currentUl);
}

It doesn't work like that.
Create a new UL, and move the items to that List:
function moveToOtherList(item){
var myList = item.up('ul');
var next = myList.next('ul');
if(!next){
next = new Element('ul',{style:"margin-top:20px;"});
myList.insert({after:next});
}
next.insert({bottom:item});
}
$$('ul li').each(function(item, index){
if(index > 3){
moveToOtherList(item);
}
});
See this jsfiddle for a working example

I dont know in Prototype but in Jquery you can try this http://jsfiddle.net/nxapS/7/