We Keep Coding

jQuery target data element in nested list

I have a list which is structured something like this:
<ul data-Id="2" class="listElement">
<li></li>
<li></li>
<li>
<ul data-Id="3" class="listElement" style="display: none">
<li></li>
<li>
<ul data-Id="4" class="listElement" style="display: none">
<li></li>
</ul>
</li>
</ul>
</li>
I need to be able target the ul element which is currently hidden, and do a slidetoggle() on it. This I have tried to do in jQuery, but it doesn't work so well:
var test = 3; //i need to declare it as a var, because i get this from another item
$('.listElement').find('[data-Id="' + test + '"]').slideToggle("fast");
Nothing really happens and I can't seem to find what I'm missing here

Your code is correct, but please make sure dom elements has been already placed(ready) when your javascript code is run.
Or your javascript should be run on ready event of document hired.
$(document).ready(function(){
var test = 3; //i need to declare it as a var, because i get this from another item
$('.listElement').find('[data-Id="' + test + '"]').slideToggle("slow");
});

Jquery - Looping through sibling elements one at at time

I am trying to loop through some sibling elements one at a time, and I am having trouble separating the process from just running through all matching elements at once. This has to be dynamic, as the list of items will vary and will not always be the same size. Examples below:
<div class="class">
<ul>
<li class="active"></li>
<li></li>
<li></li>
</ul>
</div>
<div class="class">
<ul>
<li class="active"></li>
<li></li>
<li></li>
</ul>
</div>
<div class="class">
<ul>
<li class="active"></li>
<li></li>
<li></li>
</ul>
</div>
The goal is to limit the number of active elements in each list to 1. However, when I loop through the elements using a normal .each() loop, it runs through all of the lists at the same time and limits the total amount to 1 rather then 1 per list. The code is rather simple so far, as I don't have a solution to this problem.
$('.class').find('li').each(function() {
// do something
});
I am curious of the basic task of looping through each of these lists individually and completing the tasks rather then looping through all lists at once. I would rather not create a separate jQuery call for each possible list, and would prefer a single call to handle the task. Any help or ideas would be appreciated, I might be looking past a simple solution.

Use nested loops, one for each list, then loop through the items in that list.
$(".class ul").each(function() {
var active_count = 0;
$(this).find("li").each(function() {
// do something
});
});

Loop your .class than:
$('.class').each(function() {
var $li = $(this).find('li');
// $li is now a collection of n LI elements inside the current .class
$li.each(function () {
// you can use $(this) at this point
});
});

That's how jQuery's .find works, first you searched for elements matching .class, then in all of these you searched for li. You'd have to do something like this:
$('.class').each(function () {
$(this).find('li')...
});

Your code is saying "find all the elements named class. Then loop through the <li>s present".
Try something like:
$('.class').each(function(){
$(this).find(li).each ...
}

Since each div with class ".class" contains a ul with li elements in which you want to have only one set as active, you would need to .each() on your divs and have an inner .each() on your li elements for each div.
$('.class').each(function(i, ele){
$(ele).find('li').each( function(i, ele) {} ); });

This snippet treats each list individually, and stores the first active item. Removes active from every li, then sets the original first active element to active. It also sets the first list item active if no item was active in this list.
$('.class').find('ul').each(function() {
let firstActiveLink = $(this).children('li.active:first');
$(this).children('li').removeClass('active');
if (firstActiveLink.length) {
firstActiveLink.addClass('active');
} else {
$(this).children('li:first-child()').addClass('active');
}
});
.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="class">
<ul>
<li class="active"></li>
<li class="active"></li>
<li class="active"></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li class="active"></li>
<li class="active"></li>
<li></li>
</ul>
<ul>
<li class="active"></li>
<li></li>
<li class="active"></li>
<li></li>
</ul>
</div>

Thank you for all the help! I ended up solving my problem by adding in a data- field and incrementing that field. Using a simple less than if statement to see if the element had more then the correct amount of li's associated with it. If anyone is having a similar situation, let me know if you want to see the code.

jquery, add/remove class to list item when window width changes

I try to add a class to my list items if they have a sub ul but only at a specific window width:
<ul>
<li></li>
<li></li>
<li class="hassub">
<ul>
<li></li>
</ul>
</li>
<li></li>
</ul>
I found two working jsfiddles and tried to combine them.
This is what I got: https://jsfiddle.net/Flouks/413qdd63/
These are the two I try to combine:
1: http://jsfiddle.net/userdude/rzdGJ/1/
2: http://jsfiddle.net/userdude/rzdGJ/1/
Thanks in advance for your help.
(Note to myself: learn jquery)

You forgot to add JQuery to the JSFiddle.
Here is a link to the update one
Your code does add and remove the class as intended.
if ($window.width() < 500) {
return $bla.addClass('hassub');
}
$bla.removeClass('hassub');

Add a node to list before the last item

I have a List and I want to add a list item before the last one with JQuery:
<ul id="myList">
<li></li>
<li></li>
<li></li>
<-- here i want to add the new one
<li id="myLastLi"></li>
</ul>
How can I achieve that?

As you're using jQuery, you may simply do
$('<li/>', {text:'something'}).insertBefore('#myLastLi');
Demonstration
Note that you don't have to give an ID to the last LI, you could do this without the id :
$('<li/>', {text:'something new'}).insertBefore('#myList li:last-child');

How to improve this little piece of code

I'm just wondering how to improve this code :
pagination.children('li.active').prev().prev().prev().prev().prevAll('li.pgn').css("display","none");
I just don't like the .prev() chain and I didn't find a way to improve it but I'm sure you know how ;-)
Edit:
pagination is my ul which contains a lot of li with one who has the active class.
I want to select all the li before the li.active but not the first 5 previous one.
Exemple (forget the pgn class):
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="active"></li>
That will give this :
<li style="displat: none;"></li>
<li style="display: none;"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="active"></li>

You can use :gt() selector.
pagination.children('li.active').prevAll('li:gt(4)').hide();
http://jsfiddle.net/MrvDX/

I think the fact you are doing this this way is indicative of the fact that the design of your page/app can be improved.
Why are you having to find the LI with the active class? Why don't you already know this? Surely it was your app that generated the markup in the first place.
It seems as though you are trying to determine state from markup, which I like to steer away from. You should have an object which tells you which index of LI is selected. Then you can use a much simpler jQ selector to select the indexes you are interested in.

Try this
EDIT
var pagination = $('ul');
var len = pagination.find('li.active').prevAll('li').length;
pagination.find('li.png').slice(0 , len-5).css('display','none')​​​​​​​​​​​​​​​​​;
WORKING FIDDLE

You could try something like this...
var $prevAll = pagination.children('li.active').prevAll('li.pgn');
var prevCount = $prevAll.length;
$prevAll.filter(function(index){
return (prevCount - index < 5)
}).hide() //instead of - .css("display", "none");
using the filter method and passing a function to it.
http://api.jquery.com/filter/
Here's a working example.
http://jsfiddle.net/aTzzK/2/