We Keep Coding

Reverse order of list items with JS not working correctly

I have an unordered list that I have reversed with javascript. My script works but the list is duplicated. The page renders with the original list plus the output of twhat my js is doing. How can I make it only render once? Should I rewrite with jQuery and use .detach() ? Below is my code:
var navList = $('ul.menu');
var navListItems = list.children('li');
navlist.append(navListItems.get().reverse());

Just typos in variable names :)
var navList = $('ul.menu');
var navListItems = navList.children('li');
navList.append(navListItems.get().reverse());
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="menu">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
</ul>

You're appending the items to a list that already has items. I suggest clearing the list after you've stored an array of the items. Then, you can start to append each item again. See snippet below.
var navMenu = document.getElementById("menu");
var navList = Array.from(navMenu.children);
navList.reverse().forEach( function(listItem){
navMenu.append(listItem);
});
<div>
<p>List</p>
<ul id="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
Edit: as per freedomn-m's comment, the append function will "move" existing items instead of adding onto the list. Removed the unnecessary navMenu.innerHTML = ""; line.

Javascript NodeList.forEach() not updating all found items

I don't understand why this function only seems to update the last item in the nodelist. I want the function to add the indicator element to all li elements that have a child ul element. The function finds all the elements, but only the last one seems to get updated.
var ulElementsWithChildren = document.querySelectorAll('ul.test>li ul');
var indicator = document.createElement('span');
indicator.innerHTML = '+';
ulElementsWithChildren.forEach(function(item) {
item.parentElement.appendChild(indicator);
});
html
<ul class="test">
<li>Item 1</li>
<li>Item 2
<ul>
<li>Child Item</li>
</ul>
</li>
<li>Item 3</li>
<li>Item 4
<ul>
<li>Child Item</li>
</ul>
</li>
<li>Item 5
<ul>
<li>Child Item</li>
</ul>
</li>
</ul>
JS Fiddle

You create one <span>.
You then append it in lots of different places.
Since an element can only appear in one place, you move it each time until you get to the end of the loop.
You need to create a new span each time you go around the loop.

Move your indicator declaration inside of your foreach and it will work.
example:
ulElementsWithChildren.forEach(function(item) {
var indicator = document.createElement('span');
indicator.innerHTML = '+';
item.parentElement.appendChild(indicator);
});
You're only creating a single span element.

Select all elements of arrays that are inside an array

I have two list with 3 items each one, i want to show an alert message when someone click on any item.
For all List1 items = 'List1 item clicked'
For all List2 items = 'List2 item clicked'
Since the actions is almost the same I want do this in just one code block(so if I need to add an extra list in the future, the code is easy to maintain).
This is my first attemp:
var list1 = document.getElementsByClassName('list')[0].children;
var list2 = document.getElementsByClassName('list')[1].children;
var listArray = [list1, list2];
for(i = 0; i < listArray.length; i++){
(function(){
listArray[i][i].onclick = function(){
alert("element clicked");
}
})();
}
<ul class='list'>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<ul class='list'>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
But strangely that code assign onclick event to only the first element of first array and only the second element of second array.
So my first problem is I dont know how exactly select all child of all arrays in 'listArray' to assing the onclick event to all of them.
And my second problem would be that I dont know how to do this in javascript without event listeners: "If the clicked element is a child of list1 show "message 1", but if the clicked element is a child of list2 then show "message2". I suposse I need a if condition to do this but I dont know how exactly implement it.
Something like this?
if(elementClicked = childOfParentA){
Do this.
}else if(elementClicked = childOfParentB){
Do this.
}"
Here is a CODEPEN with cosmetics
Please avoid Jquery solutions.

The above code will work for the first item in the first list and the second item in the second list (because you have [i][i], and 0 is in [0, 1]).
Here is a possible fix:
var list1 = document.getElementsByClassName('list')[0].children;
var list2 = document.getElementsByClassName('list')[1].children;
var listArray = [list1, list2];
for(i = 0; i < listArray.length; i++){
(function(){
for (j = 0; j < listArray[i].length; j++) {
var l = i + 1;
listArray[i][j].onclick = function(){
alert("List " + l +" element clicked " + this.innerHTML);
}
}
})();
}
<ul class='list'>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<ul class='list'>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
Note the usage of the local variable l to save the current list we work on in order to alert the relevant list.

More precise way without storing in separate arrays.
document.querySelectorAll("ul").forEach(function(ul, index){
ul.querySelectorAll('li').forEach(function(li){
li.onclick = function(){
alert("elements of UL-" + index+1 + " clicked");
}
})
})
<ul class='list'>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<ul class='list'>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>

It is normal that only the first/first and second/second ... etc respond to the click. This is because you specify it like that:
listArray[i][i]
Notice that i and i are always the same in that line...
You can do this a lot simpler if you would select all the clickable elements in one iterable with an appropriate selector:
function handler(){
alert("element clicked " + this.textContent);
}
Array.from(document.querySelectorAll('.list>li'), li => li.onclick = handler);
<ul class='list'>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<ul class='list'>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>

.className
window.addEventListener("click", function(e){
console.log (e.target.parentElement.className);
});
<ul class='list1'>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<ul class='list2'>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>

Determine if a related element is above or below

i'm having an unordered list with several elements and i'm using jquery sortable for moving items around - here's my markup:
<ul>
<li id=1>item 1</li>
<li id=2>item 2</li>
<li id=3>item 3</li>
<li rel=2>insert</li>
<li id=4>item 4</li>
</ul>
the "insert" element is related to the LI having ID 2 - my question:
what's the best practice for determing if the related item is above or below the "insert" element? (in this case: above)

if($(this).prevAll("[id=2]").length > 0)
{
//element is above
}
if($(this).nextAll("[id=2]").length > 0)
{
//element is below
}
You can use nextAll and prevAll functions of jquery for this. Here $(this) refers to insert element.

You can use the index function to get the place of the element and compare it to other elements:
inserted = $('li[rel=2]');
$('ul li').click(function() {
if (inserted.index() > $(this).index()) {
console.log('Clicked element is above');
} else if (inserted.index() < $(this).index()) {
console.log('Clicked element is below');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li id=1>item 1</li>
<li id=2>item 2</li>
<li id=3>item 3</li>
<li rel=2>insert</li>
<li id=4>item 4</li>
</ul>

Exacly search in javascript

How I can search text in javascript only if is match perfectly. For example I have this structure:
<ul class="item-options">
<li>First Item</li>
<li>item Name</li>
<li>product 1</li>
<li>Item Description</li>
<li>product description</li>
<li>Additional Info</li>
<li>Red</li>
<li>Color</li>
<li>Red</li>
</ul>
<ul class="item-options">
<li>Second Item</li>
<li>item Name Blue</li>
<li>product 2</li>
<li>Item Description</li>
<li>product2 description</li>
<li>Additional Info</li>
<li>-----</li>
<li>Color</li>
<li>Blue</li>
</ul>
<ul class="item-options">
<li>Third Item</li>
<li>item Name Purple</li>
<li>product 3</li>
<li>Item Description</li>
<li>-------</li>
<li>Additional Info</li>
<li>-----</li>
<li>Color</li>
<li>------</li>
</ul>
For example I want to check if the text item Name exist in the page then if the item Name text exist remove associated children. So for the first item Name I need to remove only the color:
<li>Color</li>
<li>Red</li>
Then if item Name Blue text exist I need to remove associated children
<li>Additional Info</li>
<li>-----</li>
and if the third item Name Purple text exist then remove associated children:
<li>Item Description</li>
<li>-------</li>
<li>Additional Info</li>
<li>-----</li>
<li>Color</li>
<li>------</li>
I create this script but for example the name Color is deleted everywhere. Even if in the item Name or in item Name Purple must remain there. I think the problem is because the first product have the name item Name and in the second product the name is start with item Name Purple.
<script type="text/javascript">
jQuery(document).ready(function() {
if (jQuery('.items-class li:contains("item Name")').length > 0)
{
var parent = jQuery('.items-class');
var children = jQuery('.items-class').find("li");
jQuery(children).each(function(i,e){
if(~jQuery(e).text().indexOf("item Name Blue")){
jQuery(parent).find('li:contains("Additional Info")').html('');
jQuery(parent).find('li:contains("-----")').html('');
}
if(~jQuery(e).text().indexOf("item Name Purple")){
jQuery(parent).find('li:contains("Item Description")').html('');
jQuery(parent).find('li:contains("-------")').html('');
jQuery(parent).find('li:contains("Additional Info")').html('');
jQuery(parent).find('li:contains("-----")').html('');
jQuery(parent).find('li:contains("Color")').html('');
jQuery(parent).find('li:contains("-----")').html('');
}
else if(~jQuery(e).text().indexOf("item Name")){
jQuery(parent).find('li:contains("Color")').html('');
jQuery(parent).find('li:contains("Red")').html('');
}
});
}
});
</script>

I'm not exactly sure what you are asking, but I hope this helps.
function removeAdditionalInfo(searchCriteria){
var interestingTagSelector = "ul.item-options > li";
var additionInfoHeader = "Additional Info";
var getFilter = function(criteria){
return function(index, item){ return (item.innerHTML === criteria); };
};
// find the potentially interesting li tags
$(interestingTagSelector)
// filter out those that are not in fact interesting
.filter(getFilter(searchCriteria))
// get siblings following an interesting li tag
.nextAll()
// ignore those not starting the additional info section
.filter(getFilter(additionInfoHeader))
// get siblings following the AddInfo header
.nextAll()
// removed them
.remove();
}
removeAdditionalInfo("item Name");

the removeAdditionalInfo() function below and:
removeAdditionalInfo("item Name");
removeAdditionalInfo("item Name Blue");
removeAdditionalInfo("item Name Purple");
will remove the additional info items.