jquery, move element to closest div - javascript

I want to move some span elements to closest div. I found the solution to my problem but it does not work for me. I have some Html code:
<ul>
<li>
<a><span>Some info</span></a>
</li>
<div class="cl1">...</div>
<li>
<a><span>Some info 2</span><a>
</li>
<div class="cl1">
...
</div>
...
</ul>
and to move <span> like this:
$('span').each(function () {
$(this).parent().parent().closest('.cl1').append(this);
})
but nothing happened. Any help would certainly be appreciated

you can't put a div in a ul, only li's.
your html has to be valid (a's, ul need to be closed)
Closest searches anscetors, not siblings.
since your markup is not valid as is, i'm not sure if you want the divs in the list or not. This example removes them from the lis, which breaks the list into two lists.
$('button').click(function() {
$('span').each(function() {
var $div = $(this).closest('ul').siblings('.cl1');
$(this).clone().appendTo($div);
$(this).remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<a><span>Some info</span></a>
</li>
</ul>
<div class="cl1">...</div>
<ul>
<li>
<a><span>Some info 2</span></a>
</li>
</ul>
<div class="cl1">...</div>
<button>Do Stuff</button>

Related

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.

How to copy part of a tag to another tag?

I want to insert the (ul) tag that comes after the (div) tag in class (copy1).
Then, by clicking on the tag (div) in the class (copy1), insert the (ul) tag after the tag (div) into the class (copy2). The first step is running the code, but I don't know the second step.
$(document).ready(function() {
$('ul ul').hide();
$('ul div').click(function() {
var x = $(this).next().html();
$('.copy1').html(x);
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>
<div>01</div>
<ul>
<li>01-01</li>
<li>
<div>01-02</div>
<ul>
<li>01-02-01</li>
<li>01-02-02</li>
<li>01-02-03</li>
</ul>
</li>
<li>01-03</li>
</ul>
</li>
<li>
<div>02</div>
<ul>
<li>02-01</li>
<li>02-02</li>
<li>02-03</li>
</ul>
</li>
</ul>
<hr>
<ul class="copy1"></ul>
<ul class="copy2"></ul>
After clicking on the first div tag, the following values are inserted into the copy1 class.
01-01
01-02
01-03
But by clicking on 01-02 the following values
01-02-01
01-02-02
01-02-03
Those that are in the copy1 class are not copied to the Copy2 class.
Because the elements in .copy1 are created dynamically, you either need to add events after they are created or use event delegation
$(document).on("click", ".copy1 div", function() { ...
as you want copy1->copy2, it needs to be separate from the src->copy1 code (or have additional logic within the click handler).
In the snippet below, I've kept them separate for clarity. I've also added some css to show which ones can be clicked as it was slightly confusing that 01-01 does nothing as there are no child nodes.
$(document).ready(function() {
$('ul ul').hide();
$('ul div').click(function() {
var x = $(this).next().html();
$('.copy1').html(x);
})
$(document).on("click", ".copy1 div", function() {
var x = $(this).next().html();
$('.copy2').html(x);
});
});
ul div { color: red }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>
<div>01</div>
<ul>
<li>01-01</li>
<li>
<div>01-02</div>
<ul>
<li>01-02-01</li>
<li>01-02-02</li>
<li>01-02-03</li>
</ul>
</li>
<li>01-03</li>
</ul>
</li>
<li>
<div>02</div>
<ul>
<li>02-01</li>
<li>02-02</li>
<li>02-03</li>
</ul>
</li>
</ul>
<hr>
<ul class="copy1"></ul>
<ul class="copy2"></ul>

Hide and show li active tags in javascript

<div id="product">
<ul id="shop">
<li> Vision </li>
<li class="active">Type</li>
<li> Energy</li>
</ul>
</div>
I want to show only active li tags ,while other li tags will be hide.
Excepted Output will be
Type
I try javascript
$( document ).ready(function() {
$('#shop li.active').show();
});
But nothing will happen..
Using jQuery, you need to hide which are not active
$(document).ready(function() {
$('#shop li:not(.active)').hide();
$('#shop li.active').show();
});
Can be done using CSS as well
#shop li:not(.active){
display: none;
}
I want to show only active li tags ,while other li tags will be hide.
Hide the siblings
$('#shop li.active').show().siblings().hide();
Demo
$(document).ready(function() {
$('#shop li.active').show().siblings().hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="product">
<ul id="shop">
<li> Vision </li>
<li class="active">Type</li>
<li> Energy</li>
</ul>
</div>
But nothing will happen..
Since there was no logic for hiding the li's, only showing them. As shown above, you need to show the active ones and hide rest of them.
You have to add a little bit of css which will hide li tags by default
ul li{
display:none
}
https://jsfiddle.net/jzj6o5ms/1/
You can use .not & hide
$(document).ready(function() {
$('li').not('.active').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="product">
<ul id="shop">
<li> Vision </li>
<li class="active">Type</li>
<li> Energy</li>
</ul>
</div>

How to find deeply embedded children with jquery

I have a dom tree that looks like this:
<div class="specs>
<ul>
<li>
<a></a>
</li>
<li>
<a></a>
</li>
</div>
How would I use jquery to go through each anchor tag and add a target="_blank";
Adding classes is not an option. I'm using node with an api call off to a cms to pull in markdown and parse it into html.
What I have:
$('#specs-container.specs > ul > li').children('a').each(function () {
$(this).attr('target', '_blank');
});
Thanks!
You can write it like this:
$('.specs ul li a').attr('target', '_blank');
But don't forget to fix your HTML code (quotes and missing closing </ul> tag).
HTML should be like this:
<div class="specs">
<ul>
<li>
<a></a>
</li>
<li>
<a></a>
</li>
</ul>
</div>
There were a few issues with your code. Firstly, you were missing a closing " for your specs element in the HTML, next you were missing a closing </ul> at the end of your list, and finally your jQuery code was targeting an ID which does not exist in the HTML you provided.
$(function() {
$('.specs > ul > li').children('a').each(function () {
$(this).attr('target', '_blank');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="specs">
<ul>
<li>
<a>Test</a>
</li>
<li>
<a>Test 2</a>
</li>
</ul>
</div>

Finding Child of Parent Jquery

I am have a link in a li and when you click on it, it should open a ul, also contained in the li. I can't seem to get it to select the right element though. Code below
HTML
<ul>
<li>
hi
<ul>
<li class="hidden">more stuff</li>
</ul>
</li>
</ul>
CSS
.hidden{display:none;}
Js
$( "a" ).click(function() {
$(this).parent("li").children("ul").css("display","block");
});
Since the ul is the next sibling to the a, you'd use next to access it. Then you can look at the ul's children (children) or descendants (find) for the .hidden one and remove the class (removeClass):
$(this).next().children(".hidden").removeClass("hidden");
Live Example:
$("a").on("click", function() {
$(this).next().children(".hidden").removeClass("hidden");
return false;
});
.hidden {
display: none;
}
<ul>
<li>
one
<ul>
<li class="hidden">more stuff</li>
</ul>
</li>
<li>
two
<ul>
<li class="hidden">more stuff</li>
</ul>
</li>
<li>
three
<ul>
<li class="hidden">more stuff</li>
</ul>
</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
In your code you are trying to make ul displayed although it is visible and it does not effect the li under it so you need to access that li like this. Removing the hidden class of the element to make it displayed is a better approach than assigning inline style as the commentators said
$(this).parent("li").children("ul").children("li").removeClass("hidden");
check here fiddler link...
hope it will help you....
$( "a" ).click(function() {
$(this).next().children(".hidden").removeClass("hidden");
});

Categories

Resources