How to remove nested UL element but keep child elements - javascript

I wish to remove the <ul> tags for a nested list and then add its child <li> elements to the parent <ul> element. For example :
<ul>
<li>Item 1</li>
<ul>
<li>Item 2</li>
</ul>
<li>Item 3</li>
</ul>
Should become :
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
I am new to jQuery and what I have created so far is not working and I am not sure why:
$content.find('ul').each(function() {
if ($(this).parent().is('li')) {
var elements = $(this).children().detach();
var closest = $(this).closest('li');
$(this).remove();
elements.appendTo(closest);
}
}
Any help much appreciated.

use .unwrap()
DEMO or DEMO
$('ul > ul > li').unwrap('ul');

try
var elements = [];
$('ul.outer li').each(function(){
elements.push(this);
});
$('ul.outer').html('');
for(x in elements){
$('ul.outer').append($(elements[x])[0].outerHTML);
}
if you need it to work for .. multiple levels deep .. for example
<ul class="outer">
<li>Item 1</li>
<ul>
<li>Item 2</li>
<ul>
<li>Item 2</li>
</ul>
</ul>
<li>Item 3</li>
</ul>

Related

Target multiple lists in jquery

I have three lists with the same class names. On load, I only show 5 list items per list and there are "show more" buttons which reveals the rest of the list items when clicked.
I want the behaviour such that, when the 'show more" button is pressed for one list, it also shows the hidden list items for the other lists.
My predicament is that the 3 lists behave like 1 big list and show the list items sequentially, instead of showing all the items for all lists together.
Any idea how I can get all the lists to behave in unison?
$(document).ready(function(){
var list = $(".list li");
var numToShow = 5;
var button = $(".next");
var numInList = list.length;
list.hide();
if (numInList > numToShow) {
button.show();
}
list.slice(0, numToShow).show();
button.click(function(){
var showing = list.filter(':visible').length;
list.slice(showing - 1, showing + numToShow).fadeIn();
var nowShowing = list.filter(':visible').length;
if (nowShowing >= numInList) {
button.hide();
}
});
});
.list {
padding: 0;
margin: 0;
}
.list li {
position: relative;
margin-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<h1> LIst 1</h1>
<ul class="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
</ul>
<button class="next">Show More</button>
<h1> LIst 2</h1>
<ul class="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
</ul>
<button class="next">Show More</button>
<h1> LIst 3</h1>
<ul class="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
</ul>
<button class="next">Show More</button>
</div>
You must treat the lists separately, like this:
$(document).ready(function(){
var $list = $(".list");
var numToShow = 5;
var $buttons = $(".next");
$buttons.hide();
$list.each(function() {
var $listItems = $(this).find("li");
var $button = $(this).next('.next');
var numInList = $listItems.length;
$listItems.hide();
if (numInList > numToShow) {
$button.show();
}
$listItems.slice(0, numToShow).show();
})
$buttons.click(function(){
var $this = $(this);
var $list = $this.prev(".list");
var $listItems = $list.find("li");
var showing = $listItems.filter(':visible').length;
$listItems.slice(showing - 1, showing + numToShow).fadeIn();
var nowShowing = $listItems.filter(':visible').length;
var numInList = $listItems.length;
if (nowShowing >= numInList) {
$this.hide();
}
});
});
.list {
padding: 0;
margin: 0;
}
.list li {
position: relative;
margin-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<h1> LIst 1</h1>
<ul class="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
</ul>
<button class="next">Show More</button>
<h1> LIst 2</h1>
<ul class="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
</ul>
<button class="next">Show More</button>
<h1> LIst 3</h1>
<ul class="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
</ul>
<button class="next">Show More</button>
</div>
As already mentioned by Pedro, the problem with your code is that you select all the li elements at once, no matter which list they belong to.
You should iterate through lists and work with their items separetely.
And if you want behaviour such that, when the 'show more' button is pressed for one list, it also shows the hidden list items for the other lists, you need to iterate through lists on each button click too and show a needed number of items for each of lists.
$(document).ready(function(){
var numToShow = 3;
$(".list").each(function(i, list) {
var li = $(list).find("li");
var numInList = li.length;
li.hide();
if (numInList > numToShow) {
$(list).next(".next").show();
}
li.slice(0, numToShow).show();
});
$(".next").click(function() {
$(".list").each(function(i, list) {
var li = $(list).find("li");
var numInList = li.length;
var showing = li.filter(':visible').length;
li.slice(showing - 1, showing + numToShow).fadeIn();
var nowShowing = li.filter(':visible').length;
if (nowShowing >= numInList) {
$(list).next(".next").hide();
}
});
});
});
.list {
padding: 0;
margin: 0;
}
.list li {
position: relative;
margin-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<h1> List 1</h1>
<ul class="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
<button class="next">Show More</button>
<h1> List 2</h1>
<ul class="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
</ul>
<button class="next">Show More</button>
<h1> List 3</h1>
<ul class="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
</ul>
<button class="next">Show More</button>
</div>

jQuery targeting elements with index()

So I have two unordered lists, with the same amount of items in them. So let's assume items in unordered list #2 are all hidden. The only way to make them appear is if you click on the items in unordered list #1.
so basically
<ul class="list1">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
<ul class="list2">
<li class="hide">item 1</li>
<li class="hide">item 2</li>
<li class="hide">item 3</li>
<li class="hide">item 4</li>
</ul>
Now the way I'm trying to accomplish this is using the index() method, but I'm not sure how to properly approach this code.
This is how I thought of it.
$('.list1').on('click', 'li', function() {
$('.list2 li').index($(this).index()).toggleClass('active');
});
so when you click on an line item in .list1, whatever the index of that line item is, is the index I want to target in .list2
the problem I'm having is that when I console log it, I'm getting weird index numbers. The first line item would show up as 2 rather than 0, and the index for the 2nd line item would be -1.
what am I doing wrong? a lot I'm sure.
thanks in advance guys!
Jquery .index() return index of selected element. You need to use :eq() selector or .eq() method to selecting element with index.
$('.list1').on('click', 'li', function() {
$('.list2 li').eq($(this).index()).toggleClass('active');
});
.hide { display: none; }
.active { display: block; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list1">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
<ul class="list2">
<li class="hide">item 1</li>
<li class="hide">item 2</li>
<li class="hide">item 3</li>
<li class="hide">item 4</li>
</ul>
try this, this will work for you fine
<html>
<head></head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style type="text/css">
/* in here we get the ul which the class name is list2 and get the li elements inside it and hide those first*/
ul.list2 li{
display: none;
}
</style>
<body>
<ul class="list1">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
<ul class="list2">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
</body>
<script type="text/javascript">
$(document).ready(function(){
$("ul.list1 li").click(function(){
var theindex = $(this).index();//in here you get the index number of clicked li element inside list1 class
$("ul.list2 li").eq(theindex).slideToggle(500);//then in here, you show the same index li element in list2 , which we are hidden.
});
});
</script>
</html>

Find first next element and then stop the search

How can use I jQuery to select the first element coming after (not immediate) a specific element? I have this list.
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li class="tr current">Item 3</li>
<li>Item 4</li>
<li class="tr">Item 5</li>
<li>Item 6</li>
<li class="tr">Item 7</li>
<li>Item 8</li>
</ul>
How can I select/manipulate the first coming tr (Item 5) using tr current (Item 3) using jQuery? I have tried this.
// This apply background color to the next immediate (Item 4) as its definition.
$('.tr.current').next().css('background-color', '#000');
// This apply to background color all next Items
$('.tr.current').nextAll().css('background-color', '#000');
// This apply to background color all next Items with class tr (Item 5, Item 7)
$('.tr.current').next('.tr').css('background-color', '#000');
use .nextAll() with :first selector:
$('.tr.current').nextAll('.tr:first').css('background-color', '#000');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li class="tr current">Item 3</li>
<li>Item 4</li>
<li class="tr">Item 5</li>
<li>Item 6</li>
<li class="tr">Item 7</li>
<li>Item 8</li>
</ul>

jQuery Each, Iterate from starting element? [duplicate]

This question already has answers here:
jQuery: How to use each starting at an index other than 0
(3 answers)
Closed 7 years ago.
Is it possible to start an each loop starting from a certain element instead of all the elements?
e.g. If i wanted to make items above "Item two" red. (I'm aware there's no need for an each loop to do that, this is just an example case)
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
$('li').each(function(){
$(this).css("color", "red");
});
You can check current item index and skip iteration:
$('li').each(function(){
if( $( this ).index() < 2 ) return true;
$(this).css("color", "red");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
You can use index property of .each function.
$('li').each(function(index) {
if (index > 1) {
$(this).css("color", "red");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
This can be done as follows
$(document).ready(function(){
var lis = $('ul').children();
console.log($(lis).length);
for(var i = 1; i < 3; i++)
{
$(lis[i]).css("color", "red");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>

How to append li inside new div

I have a HTML markup like this:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ul>
How can I convert above HTML into this:
<div class="main"><ul><li>Item 1</li><li>Item 2</li></ul></div>
<div class="main"><ul><li>Item 3</li><li>Item 4</li></ul></div>
<div class="main"><ul><li>Item 5</li><li>Item 6</li></ul></div>
<div class="main"><ul><li>Item 7</li><li>Item 8</li></ul></div>
You can do like this:
$('ul > li:nth-child(2n-1)').each(function() {
$(this).next().add(this).wrapAll('<div class="main"><ul></ul></div>');
}).eq(0).closest('div').unwrap();
Working Demo

Categories