Develop Reference

Jquery combining text from parent li elements on click to get path

I am struggling with jquery a little. I have an unordered list that looks like this.
<ul>
<li class="folder">Folder: Test</li>
<ul>
<li class="folder">Folder: Archive</li>
<ul>
<li class="file">
<div class="filename">HelloWorld.docx</div>
<div class="size">11.79kiB</div>
<div class="date">2021-01-12 09:31:34</div>
</li>
<li class="file">
<div class="filename">HelloWorld1.docx</div>
<div class="size">12.79kiB</div>
<div class="date">2021-01-11 09:31:34</div>
</li>
</ul>
</ul>
</ul>
Which looks like this
Folder: Test
Folder : Archive
HelloWorld.docx
11.79kiB
2021-01-12 09:31:34
HelloWorld1.docx
12.79kiB
2021-01-11 09:31:34
When I click on any of the li's with the class of "file" I want to look back and work out what the path structure is by finding the parent li's that have the class "folder".
I have tried various combinations but cannot get it
This is what I am working with at the moment
$(document.body).on('click',"li.file",function (e) {
console.log("clicked");
$(this).parents("li.folder").each(function() {
console.log($(this).text());
});
});
Ultimately i want to get back a full path with the parent folder and the filename in a variable.
e.g. pathtofile = /Test/Archive/HelloWorld.docx
Here is a jsfiddle https://jsfiddle.net/e5d7bcyz/
Thanks

Before approaching your question you first need to correct the HTML. ul elements cannot be children of other ul elements. You need to wrap the ul within their associated li.
You will also need to wrap the folder names in another element, such as a span, in order for the text to be easily retrievable. This would be possible with your current HTML by trawling through text nodes, however that is messy code to write and very brittle. A simple HTML change is the best approach there.
Finally, you can loop through the parent li elements of the clicked .file and reverse their order to get the path in the right format. From there you can append the filename of the selected file. Try this:
$.fn.reverse = [].reverse;
$(document).on('click', "li.file", function(e) {
let $file = $(this);
let $path = $file.parent().parents('li').reverse();
let path = $path.map((i, el) => $(el).children('span').text().trim()).get();
path.push($file.children('.filename').text().trim());
console.log(path.join('/'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="folder">
<span>Test</span>
<ul>
<li class="folder">
<span>Archive</span>
<ul>
<li class="file">
<div class="filename">HelloWorld.docs</div>
<div class="size">11.79kiB</div>
<div class="date">2021-01-12 09:31:34</div>
</li>
<li class="file">
<div class="filename">HelloWorld1.docs</div>
<div class="size">12.79kiB</div>
<div class="date">2021-01-11 09:31:34</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>

Well, the LI you're looking for are not really the parents as they're not wrapping the current li.file element.
<ul>
<li class="folder">Folder: Archive</li> // You close the LI tag. So it's not a parent of the rest of the code.
<ul>
<li class="file">
Try to wrap the rest of the code with the LI tag:
<ul>
<li class="folder">Folder: Test
<ul>
<li class="folder">Folder: Archive
<ul>
<li class="file">
<div class="filename">HelloWorld.docx</div>
<div class="size">11.79kiB</div>
<div class="date">2021-01-12 09:31:34</div>
</li>
<li class="file">
<div class="filename">HelloWorld1.docx</div>
<div class="size">12.79kiB</div>
<div class="date">2021-01-11 09:31:34</div>
</li>
</ul>
</li> //closing the second parent: Folder: Archive
</ul>
</li> //closing the first parent: Folder: test
</ul>
As far as I know it's valid HTML code.
And then those li.folder elements would be actually parents.

Slide up multiple <ul> elements using jQuery

I am trying to construct a jquery statement that will slideUp() all <ul> elements whose siblings don't contain a set of specific classes (.clicked, .chosen).
Suppose I have the following nested <ul> structure:
<ul class="mainmenu">
<li>Dogs</li>
<ul>
<li>Fido</li>
<li class="chosen">Barney</li>
<li>Turbo</li>
</ul>
<li>Cats</li>
<ul>
<li>Sylvester</li>
<li>Felix</li>
<li>Garfield</li>
</ul>
<li class="clicked">Hamsters</li>
<ul>
<li>Chubbs</li>
<li>Oreo</li>
<li>Ruby</li>
</ul>
</ul>
For the above example, I would like to slideUp() only the 'Cats' <ul> element ('Sylvester', 'Felix', 'Garfield') because none of it's elements use the 'chosen' or 'clicked' classes.
My current jquery statement reads:
$('.mainmenu').first().siblings().not('.clicked, .chosen').slideUp();
This, and everything else I have tried, returns nothing. Suggestions?

You HTML looks challenging :) but somehow, I've managed to create a query to perform what you're looking for.
And if you want to check multiple class for particular element you can use is() as well.
//Check li doesn't have clicked class and then filter ul next to the li
$('.mainmenu > li').not('.clicked').next('ul').filter(function(){
//Find the ul, if it's any of li doesn't have chosen class
if(!$(this).find('li').hasClass('chosen'))
{
return $(this);
}
}).slideUp();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="mainmenu">
<li>Dogs</li>
<ul>
<li>Fido</li>
<li class="chosen">Barney</li>
<li>Turbo</li>
</ul>
<li>Cats</li>
<ul>
<li>Sylvester</li>
<li>Felix</li>
<li>Garfield</li>
</ul>
<li class="clicked">Hamsters</li>
<ul>
<li>Chubbs</li>
<li>Oreo</li>
<li>Ruby</li>
</ul>
</ul>

How to reach the next li a from a specific point

I need to change link color to the button below the id #idTERRITORIAL_8 which has the class .active_default, the idIMMUNOLOGY_9, but I cannot use that directly. My starting point has to be #idTERRITORIAL_8.
I tried this :
$('#idTERRITORIAL_8').parent().find('.active_default').addClass("red");
But all .active_default changed color.
I also tried next and nextAll
<div id="wrapper">
<ul class="menu">
<li>Overview</li>
<li>Sales
<ul>
<li>National</li>
<li>Provincial</li>
<li>Regional
<ul>
<li>Immunology</li>
<li>Coagulation</li>
</ul>
</li>
<li>Territorial
<ul>
<li>Immunology</li>
<li>Coagulation</li>
</ul>
</li>
<li>Depot</li>
</ul></li>
<li>ICP</li>
</ul>
</div>

$('#idTERRITORIAL_8').next().find('.active_default').addClass("red");
Link to jsbin example:
https://jsbin.com/lenotolaco/1/edit?html,js,output

jQuery accordion slides up multiple times

I'm making a jquery accordion and I have some issues
My jQuery searches for a ul inside a class and if it has a certain class it slides down, but it slides down as many times as the element ul exists in the whole nav
Here is my jquery code so far:
if($(this).has("ul").length){
$(".menu ul li").on('click',function(e){
$(this).addClass('open').siblings().removeClass('open').children();
$('.menu ul li ul').slideUp();
if($(this).parents().find(".open").length){
$(this).children('ul').slideDown();
}
//$(this).parents().find(".open").children('ul').slideDown();
e.preventDefault();
});
};
this is my html:
<div class="menu">
<a id="jump" href="#"><p>Menu</p><span class="right">▼</span></a>
<nav class="row">
<div class="page_wrapper">
<ul class="niveau_1">
<li class="active">Home</li>
<li>Group
<ul class="sub-menu">
<li>QHSE/Awards</li>
<li>Vacatures/</li>
</ul>
</li>
<li>Nieuws & Media
<ul class="sub-menu">
<li>Van Moer in de media</li>
<li>Nieuwsarchief</li>
</ul>
</li>
<li>Sport & Events
<ul class="sub-menu">
<li>Casual Friday
<ul>
<li>Inschrijving</li>
<li>Foto's</li>
</ul>
</li>
<li>Thursday Lounge</li>
<li>Triatlon</li>
<li>Sponsoring</li>
<li>Beurzen</li>
<li>Kalender</li>
</ul>
</li>
<li>Vestigingen</li>
<li>Contact</li>
</ul>
</div>

just guessing sincei don't have HTML to look too... your problem is here in parents()
Get the ancestors of each element in the current set of matched elements, optionally filtered by a selector.
i think u need parent() here
Get the parent of each element in the current set of matched elements, optionally filtered by a selector.
if($(this).parent().find(".open").length){ //try this
$(this).children('ul').slideDown();
}
note: it would be easy if you provide us with your HTML too

Append to element is not working

I have the following HTML:
<textarea class="input" placeholder="Tap to enter message" maxlength="160"></textarea>
<div class="keyboard">
<ul id="special">
<li data-letter="!">!</li>
<li data-letter="?">?</li>
<li data-letter=",">,</li>
<li data-letter=":">:</li>
<li data-letter=";">;</li>
</ul>
<ul id="first">
<li data-letter="q">q</li><li>1</li>
<li data-letter="w">w</li><li>2</li>
<li data-letter="e">e</li><li>3</li>
<li data-letter="r">r</li><li>4</li>
<li data-letter="t">t</li><li>5</li>
<li data-letter="y">y</li><li>6</li>
<li data-letter="u">u</li><li>7</li>
<li data-letter="i">i</li><li>8</li>
<li data-letter="o">o</li><li>9</li>
<li data-letter="p">p</li><li>0</li>
</ul>
<ul id="second">
<li data-letter="a">a</li>
<li data-letter="s">s</li>
<li data-letter="d">d</li>
<li data-letter="f">f</li>
<li data-letter="g">g</li>
<li data-letter="h">h</li>
<li data-letter="j">j</li>
<li data-letter="k">k</li>
<li data-letter="l">l</li>
</ul>
<ul id="third">
<li id="caps" class="pointer">⇧<span id="underline" class="color">_</span></li>
<li data-letter="z">z</li>
<li data-letter="x">x</li>
<li data-letter="c">c</li>
<li data-letter="v">v</li>
<li data-letter="b">b</li>
<li data-letter="n">n</li>
<li data-letter="m">m</li>
<li><img src="backspace.png"></li>
</ul>
<ul id="fourth">
<li class>?123</li>
<li>,</li>
<li> </li>
<li>.</li>
<li><img src="search.png"></li>
</ul>
with the following javascript:
$('.keyboard ul li').click(function() {
var data = $(this).data('letter');
$('.input').append(data);
});
What I want to have happen is when I click on one of the list items, I want the data-letter to insert itself into the input, sorta like an onscreen keyboard. But it isn't working. Can someone help me?
Here is a Fiddle
Update
This works now
My next problem is the uppercase button. When I click the button, the characters turn to uppercase. How would I use the data to inject an uppercase letter into the input?
The final problem is the first row of letters won't inject into the input. How do I fix this?

Try the below
Enable Jquery file instead of mootools in the fiddle
Thanks

Try:
Demo
$('.keyboard ul li').click(function() {
var data = $(this).data('letter');
$('.input').val( $('.input').val()+ data);
});​

All you have to do is remove the margin on the .input element (it's offscreen for me), and enable jquery on the jsfiddle. After that it works fine for me.

Not sure why jquery .data() not work, but you can use below "this.dataset.xxx"
var data = this.dataset.letter;

This is the solution I came up with
keys = $(".keyboard ul li");
keys.on("click", function() {
var let = $(this).text(),
upperlet = let.toUpperCase(),
lowerlet = let;
if (keys.hasClass("uppercase")){
input.append(upperlet);
}else {
input.append(lowerlet);
}
});
Instead of having the data-letter attribute for every single list-item, I got the text using this function, and appended it on click. This now also accounts for the uppercase letters as well.