We Keep Coding

Next child LI that is wrapped in a different UL

I have the following list:
<ul>
<li class="item">One</li>
<li class="item">Two</li>
<li class="item">Three
<ul>
<li class="item">Something Original</li>
<li class="item selected">Something</li>
</ul>
</li>
<li>Four
<ul>
<li class="item">I want this selected next</li>
<li class="item">Good</li>
</ul>
</li>
</ul>
Using jQuery, how do I find the next li with the class="item" since it is wrapped in a different container. Obviously I cannot do $(".selected").next(".item") so how else can I do it?
JSFiddle: http://jsfiddle.net/q3f6v7zz/

Since the li elements are nested and you know that you want the next appearing li with a particular class, you can use .index() and do something like this
var $li = $('.item'); // <--- get the list of all lis with class .item
var index = $li.index($('.selected')); // <--- find the index of the one with .selected amongst all the lis
console.log($li.eq(index+1).html()); // <--- index+1 because you need the next appearing li after selected
If you want to move the selected class on keydown something like this should do
var $li = $('.item');
$(document).on('keydown', function(e) {
if (e.keyCode == 40) {
var index = $li.index($('.selected'));
$li.eq(index).removeClass('selected');
index = (index+1) % $li.length; // <--- to rotate the values from 0 to count of li.item elements
$li.eq(index).addClass('selected');
}
});
var $li = $('.item');
$(document).on('keydown', function(e) {
if (e.keyCode == 40) {
var index = $li.index($('.selected'));
$li.eq(index).removeClass('selected');
index = (index+1) % $li.length;
$li.eq(index).addClass('selected');
}
});
.selected {
background: green;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul>
<li class="item">One</li>
<li class="item">Two</li>
<li>Three
<ul>
<li class="item">Something</li>
<li class="item selected">Something Else</li>
</ul>
</li>
<li>Four
<ul>
<li class="item">I want this selected next</li>
<li class="item">Good</li>
</ul>
</li>
</ul>

You can get the index of the selected element within all lis, and then increment that index to get the next one.
$("ul").on("click", "li.item.selected", function() {
var all_li = $("li.item");
var selected_index = all_li.index(this);
var next_li = all_li.eq((selected_index + 1) % all_li.length);
$(this).removeClass("selected");
next_li.addClass("selected");
});
.item.selected {
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="item">One</li>
<li class="item">Two</li>
<li class="item">Three
<ul>
<li class="item selected">Something</li>
</ul>
</li>
<li>Four
<ul>
<li class="item">I want this selected next</li>
<li class="item">Good</li>
</ul>
</li>
</ul>
I used the modulus so it will wrap around at the end.

Not sure what you are exactly looking for but you can use $(Element").parent().parent().find("li");
So in other words .parent() may be what you are looking for there is also .sibling() to find or you may want $('li').closest('ul').find('li')
which will go up the tree to find the nearest ul to the one you are looking for
https://api.jquery.com/closest/
You may also use:
Vanilla JS to do something similar to what was discussed by others with $index if it makes more sense to you:
Again this isn't as efficient but that is basically what JQuery is doing:
var myLis = document.getElementsByTagName('li');
var wantedIndex;
for(var i = 0;i<myLis.length; i++){
if(myLis[i].className === "active"){
wantedIndex = i+1; //gets the li which is next when selecting all lis
}
}

jQuery search filter show the list item header

I have following list
<ul id="fromList">
<li class="header">-ABC-</li>
<li class="item">123</li>
<li class="item">258</li>
<li class="item">189</li>
<li class="item">545</li>
<li class="header">-CDE-</li>
<li class="item">789</li>
<li class="item">215</li>
<li class="item">897</li>
<li class="item">999</li>
<li class="header">-EFG-</li>
<li class="item">701</li>
<li class="item">566</li>
<li class="item">511</li>
</ul>
When searching the item it should show the list item header
For example when i am searching '9'
It should show
-ABC-
189
-CDE-
789
897
999
Now I am getting search list only:
function filter(element) {
var value = $(element).val();
$("#fromList li").each(function() {
if ($(this).text().search(new RegExp(value, "i")) > -1) {
$(this).show();
} else {
$(this).hide();
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' id='txtList' onkeyup="filter(this)" />
<ul id="fromList">
<li class="header">ABC</li>
<li class="item">123</li>
<li class="item">258</li>
<li class="item">189</li>
<li class="item">545</li>
<li class="header">CDE</li>
<li class="item">789</li>
<li class="item">215</li>
<li class="item">897</li>
<li class="item">999</li>
<li class="header">E</li>
<li class="item">701</li>
<li class="item">566</li>
<li class="item">511</li>
</ul>

You could combine the .prevAll() method with the .first() method in order to select the header element of the li that should be shown:
$(this).prevAll('.header').first().show();
Updated Example
function filter(element) {
var value = $(element).val();
$("#fromList li").each(function () {
if ($(this).text().search(value) > -1) {
$(this).show();
$(this).prevAll('.header').first().show();
} else {
$(this).hide();
}
});
}
I'd suggest using unobtrusive JavaScript. I also shortened your code a little.
Updated Example
$('#txtList').on('keyup', function () {
var value = this.value;
$('#fromList li').hide().each(function () {
if ($(this).text().search(value) > -1) {
$(this).prevAll('.header').first().add(this).show();
}
});
});
As a side note, if you want to exclude the header from being selected if you were to type something like "ABC", just use the .not() method to negate the .header element from the selection:
Updated Example
if ($(this).not('.header').text().search(value) > -1) {
// ..
}

Alternatively, you could just specify sorting the list items with the items class, rather than every item in the list:
$('#txtList').keyup(function () {
var value = this.value;
$('#fromList li.item').each(function () {
if ($(this).text().search(value) > -1) {
$(this).show();
} else {
$(this).hide();
}
});
});

javascript onclick for list

I am trying to use onclick function on html list elements.
The function display is getting called but I am not getting the value. It shows undefined in console.
code:
function display() {
var x = document.getElementById('tags').selectedIndex;
console.log(x);
}
<ul id="tags">
<li id="android" value="android" onclick="display()">android</li>
<li id="swing" value="swing" onclick="display()">swing</li>
<li id="eclipse" value="eclipse" onclick="display()">eclipse</li>
<li id="spring" value="spring" onclick="display()">spring</li>
<li id="hibernate" value="hibernate" onclick="display()">hibernate</li>
<ul>

First pass 'this' to the function so it knows where the call is coming from
<ul id="tags">
<li id="android" value="android" onclick="display(this)">android</li>
<li id="swing" value="swing" onclick="display(this)">swing</li>
<li id="eclipse" value="eclipse" onclick="display(this)">eclipse</li>
<li id="spring" value="spring" onclick="display(this)">spring</li>
<li id="hibernate" value="hibernate" onclick="display(this)">hibernate</li>
<ul>
Then use getAttribute to get the value
function display(elm) {
var x = elm.getAttribute('value');
console.log(x);
}
Just for FYI, if you use jQuery you can simply access the li's directly without having to add the onClick attribute to the LI tags.
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
$(function() {
$('ul#tags li').click( function() {
console.log($(this).attr('value'));
});
});
</script>
<ul id="tags">
<li id="android" value="android">android</li>
<li id="swing" value="swing">swing</li>
<li id="eclipse" value="eclipse">eclipse</li>
<li id="spring" value="spring">spring</li>
<li id="hibernate" value="hibernate">hibernate</li>
<ul>

Edit: Trying to get the value of a list element will give you 0 so as far as I know this is impossible to do using plain JavaScript.
Note:The code below does not work. Sorry.
Your JavaScript would need to look like
function display() {
var x = this.value;
console.log(x);
}
What you could do is
var list = getElementByID("#tags");
list.getElementsByTagName("li").onclick = display;
function display() {
var x = this.value;
console.log(x);
}
Also make sure that your javascript is inside <script></script> tags.

get list equal height inside div element

Please take a look at this FIDDLE. I have two pairs of unordered lists, each of which is inside a div element.pricing-table. The following code can find the li with the same classes, get the max height and set the height of all of them to the same. But I want to limit it to getting the max-height of each pair of lists inside each div element.
I think this line is giving me problem because it is getting all the lists with the same classes in the document:
var elems = $('.pricing-table ul li.' + elem.className),
I don't think I can use $(this) and update it like $(this +elem.className). Any suggestions?
Jquery script:
$(document).ready( function(){
$('.pricing-table ul li').each(function(i, elem) {
var elems = $('.pricing-table ul li.' + elem.className),
heights = $.map(elems, function(li) {
return $(li).height();
}),
max = Math.max.apply(null, heights);
elems.height(max);
});
});
HTML
<div class="pricing-table">
<ul>
<li class="heading">Bronze</li>
<li class="year">2003<p>(Text)..........</li>
<li class="package">Starter package</li>
<li class="location">Africa (Text).......)</li>
<li class="description">Text............ </li>
</ul>
<ul class="feature">
<li class="heading">Silver</li>
<li class="year">2004</li>
<li class="package">Intermediate package</li>
<li class="location">Asia</li>
<li class="description">Text............ </li>
</ul>
</div>
<div class="pricing-table">
<ul>
<li class="heading">Bronze</li>
<li class="year">2003<p>(Text)..........</li>
<li class="package">Starter package</li>
<li class="location">Africa (Text).......)</li>
<li class="description">Text............ </li>
</ul>
<ul class="feature">
<li class="heading">Silver</li>
<li class="year">2004</li>
<li class="package">Intermediate package</li>
<li class="location">Asia</li>
<li class="description">Text............ </li>
</ul>
</div>

You’d need to get only the li that are descendants of your current .pricing-table element, so you’ll have to iterate over the latter first:
$(document).ready(function () {
$('.pricing-table').each(function (i, e) {
$(e).find('ul li').each(function (i, elem) {
var elems = $(e).find('ul li.' + elem.className),
heights = $.map(elems, function (li) {
return $(li).height();
}),
max = Math.max.apply(null, heights);
elems.height(max);
});
});
});
… or something like that. http://jsfiddle.net/p3sfy/3867/
(Still kinda ugly, since it will iterate over the li multiple times, so that’s rather just a “quick fix” – but I don’t wanna think about anything more sophisticated here before I have not first heard a convincing argument why this data is not marked up using tables in the first place …?)

Add count classes for nested list elements with jQuery

I have this HTML:
<ul class="parent">
<ul>
<li>
<ul></ul>
</li>
<li>
<ul>
<li>
<ul></ul>
</li>
</ul>
</li>
</ul>
</ul>
I need to add count classes for all nested lists in this markup, to reach this:
<ul class="parent">
<ul class="level-1">
<li>
<ul class="level-2"></ul>
</li>
<li>
<ul class="level-2">
<li>
<ul class="level-3"></ul>
</li>
</ul>
</li>
</ul>
<ul class="level-1">
<li>
<ul class="level-2"></ul>
</li>
<li>
<ul class="level-2">
<li>
<ul class="level-3"></ul>
</li>
</ul>
</li>
</ul>
</ul>
So i do this:
var parent_ul = $('.parent');
if (parent_ul.doesExist()){
var parent_ul_lists = parent_ul.find('ul');
parent_ul_lists.each(function(){
var i;
for (i = 0; i < parent_ul_lists.length; i++) {
$(this).eq(i).addClass('level-' + i);
}
})
}
But in output i have class test level-1 for all of parent list childrens. Can anybody help?

Try this
$('.parent ul').addClass(function(){
return "level-"+$(this).parents('ul').length;
});
DEMO

Try this
var parent = $('.parent').children();
next = parent;
var i = 0;
while (next.length) {
parent = next;
parent.addClass("Level_" + i);
i++;
next = next.children();
}
Demo

You need some good 'ole recursion!
Check out this JSFiddle UPDATE: corrected jsFiddle link
Here is the code:
function labelChildUL(element, count) {
element.children().each(function (index, value) {
var $me = $(value);
if ($me.is("ul")) {
$me.addClass("level-" + (count + 1));
labelChildUL($me, count + 1);
}
else
{
labelChildUL($me, count);
}
});
}
$(document).ready(function () {
var $parent = $('#parent');
labelChildUL($parent, 0);
});
I also updated your html to use id instead of class for "parent":
<ul id='parent'>
...

You can use this;
var parent_ul = $('.parent');
var parent_ul_lists = parent_ul.find('ul');
parent_ul_lists.each(function(){
$(this).addClass('level-'+ ($(this).parents().length -1)/2);
});
See working demo here: http://jsfiddle.net/huseyinbabal/qmGcC/
Note: Inspect element in output to see class assigned