I need to clone strings, unwrap li, and separate them with commas.
$('ul li div ul li').clone().prependTo('.ins');
<div style="display:none;">
<ul id="path">
<li>
<div class="wr_t">
<ul>
<li>
1
</li>
<li>
2
</li>
<li>
3
</li>
</ul>
</div>
</li>
</ul>
</div>
<div class="ins"></div>
I try to add .unwrap('<li></li>') before .clone, but it doesn't work.
I need to output 1,2,3
Here is how I did it on jsfiddle:
http://jsfiddle.net/qeQ6L/
$('.wr_t a').clone().prependTo('.ins').after(',');
You were going about it the wrong way, I targeted the links directly and cloned them before inserting them in .ins
Related
I have an unordered nested list
I want to count these nested lists in such a way that inside <li>Animals</li> there are 19 animals inside this li. I wanted to count all li having the name of animals using Javascript. How should I proceed?
<ul>
<li>
Animals
<ul>
<li>
Mammals
<ul>
<li>Apes
<ul>
<li>Chimpanzee</li>
<li>Gorilla</li>
<li>Orangutan</li>
</ul>
</li>
<li>Coyotes</li>
<li>Dogs</li>
<li>Elephants</li>
<li>Horses</li>
<li>Whales</li>
</ul>
</li>
<li>
Other
<ul>
<li>
Birds
<ul>
<li>Albatross</li>
<li>Emu</li>
<li>Ostrich</li>
</ul>
</li>
<li>Lizards</li>
<li>Snakes</li>
</ul>
</li>
</ul>
</li>
<li>Fish
<ul>
<li>Goldfish</li>
<li>Salmon</li>
<li>Trout</li>
</ul>
</li>
</ul>
#mplungjan put forward this solution in the comments and it works. document.querySelectorAll("ul")[1].querySelectorAll("li").length
this gives 17 which is the correct count (after clarification in comments which overrode the first count given which was 19).
The question asks about traversing and we show that step by step here so as to help with more general solutions.
We first have to find the element which is holding all the other lists. I have assumed that that ul element is the first in the document. In the general case we'd probably find such an element by knowing it's id or its class.
We then find the li element which is associated with Animals and again we assume it's the first one, as it is in the HTML given. However, if it was to be more sophisticated you'd want to look for the li element that has Animals as its innerHTML.
We then find the associated lis and count them.
Here is the code and you can run the snippet to see it gets to 17 (which was clarified in comments, the original count in the question was given as 19, also clarified was that this has nothing to do with counting actual animal names, only to do with counting li elements).
<!DOCTYPE html>
<html>
<body>
<ul>
<li>
Animals
<ul>
<li>
Mammals
<ul>
<li>Apes
<ul>
<li>Chimpanzee</li>
<li>Gorilla</li>
<li>Orangutan</li>
</ul>
</li>
<li>Coyotes</li>
<li>Dogs</li>
<li>Elephants</li>
<li>Horses</li>
<li>Whales</li>
</ul>
</li>
<li>
Other
<ul>
<li>
Birds
<ul>
<li>Albatross</li>
<li>Emu</li>
<li>Ostrich</li>
</ul>
</li>
<li>Lizards</li>
<li>Snakes</li>
</ul>
</li>
</ul>
</li>
<li>Fish
<ul>
<li>Goldfish</li>
<li>Salmon</li>
<li>Trout</li>
</ul>
</li>
</ul>
<script>
var firstUL = document.getElementsByTagName('UL')[0]; //assuming the whole list is the first UL in the document
var animalsLI = firstUL.getElementsByTagName('LI')[0];
var animalsLIUL = animalsLI.getElementsByTagName('UL')[0];
var animalsLIs = animalsLI.getElementsByTagName('LI');
alert('The count of LIs is ' + animalsLIs.length);
</script>
</body>
</html>
I have the following code:
<div id="myDiv">
<ul>
<li> Thing 1
<li> Thing 2
</ul>
</div>
I want to be able to add one new item to the list, which is unidentified.
If I do:
var x = $('#myDiv').has('ul')
I am actually referring to the correct div, but I want to refer to the ul itself so I can do an .append().
What is the correct way of doing this?
Thank you for your help!
You can point to ul like this
$('#myDiv ul')
$('#myDiv ul').append('<li>Item to append</li>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDiv">
<ul>
<li> Thing 1
<li> Thing 2
</ul>
</div>
You can refer <ul> directly:-
$('ul').append('<li>Item 3 appended</li>');
Working snippet:-
$('ul').append('<li>Item 3 appended</li>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDiv">
<ul>
<li> Thing 1
<li> Thing 2
</ul>
</div>
Note:- It will add <li> to all <ul>'s if multiple are present.
So if you want to append to specific <ul> take a reference to its parent
$('#myDiv ul').append('<li>Item 3 appended</li>');
Working snippet:-
$('#myDiv ul').append('<li>Item 3 appended</li>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDiv">
<ul>
<li> Thing 1
<li> Thing 2
</ul>
</div>
I have a list and I want to get the first item after each heading item. I need to do this all in one line as im using Nightwatch, which hasnt got all the elasticity of using jquery in the browser. What I have is:
// This works
console.log('first item after first header is ');
console.log($('#ul-wrapper li.heading ~ li:first').text());
// This doesnt
console.log('first item after second header is ');
console.log($('#ul-wrapper li.heading:nth-child(2) ~ li:first').text());
So essentially i need to combine the class selector with nth-child() or eq(). Html is:
<ul id="ul-wrapper">
<li class="heading">
Heading 1
</li>
<li>
<label>
<a>
Item 1
</a>
</label>
</li>
<li>
<label>
<a>
Item 2
</a>
</label>
</li>
<li class="heading">
Heading 2
</li>
<li>
<label>
<a>
Item 3
</a>
</label>
</li>
<li>
<label>
<a>
Item 4
</a>
</label>
</li>
</ul>
The fiddle is here
I have a list and I want to get the first item after each heading item
If I understand right you can use Adjacent sibling selectors
$('#ul-wrapper li.heading + li').css("background", "red");
.heading {
background-color: lightgreen;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="ul-wrapper" style="">
<li class="heading">
Heading 1
</li>
<li>
<label>
<a>
Item 1
</a>
</label>
</li>
<li>
<label>
<a>
Item 2
</a>
</label>
</li>
<li class="heading">
Heading 2
</li>
<li>
<label>
<a>
Item 3
</a>
</label>
</li>
<li>
<label>
<a>
Item 4
</a>
</label>
</li>
</ul>
The :nth-child() pseudo class only looks at the index of the element relative to the parent element. Similarly, :nth-of-type() will only look at the index of the element based on the type. Neither the :nth-child()/:nth-of-type() pseudo classes will consider the element's class attribute.
With that being said, the :eq() method will select an element by it's index based on the filtered set (which is exactly what you want in this case). However, it's worth pointing out that :eq() has an index that is zero-based (unlike :nth-child()/:nth-of-type()). In this case, you would need to use eq(1) to access the second li element:
Example Here
$('#ul-wrapper li.heading:eq(1) ~ li:first');
You could also use the adjacent sibling combinator, +:
Example Here
$('#ul-wrapper li.heading:eq(1) + li');
Sizzle does not return all the elements which match the selector. Here is JSBin Demo showing the problem.
HTML
<h4> Playing with Sizzle JS </h4>
<ul class="list">
<li> Item 1 </li>
<li class="row"> Item 2 </li>
<li class="row"> <span>Item 3</span> </li>
<li class="divider">List item with unique class name </li>
</ul>
<ul class="list">
<li> Item 1 </li>
<li class="row"> Item 2 </li>
<li class="row"> <span>Item 3</span> </li>
<li class="divider">List item with unique class name </li>
</ul>
JS
var selector = 'UL.list > LI:eq(1)';
var elements = Sizzle(selector);
console.log(elements.length); //Says 1
My Question is:
Why it returns only 1 element while there are 2 elements which match the selector?
How can I make sizzle to return all matching elements ?
UL.list > LI:eq(1) will only ever return one element: the 2nd element that matches UL.list > LI, as indicated by :eq(1).
If you're looking for all li elements, remove the :eq().
If you're looking for every li that is the second child, use :nth-child():
var elements = Sizzle('UL.list > LI:nth-child(2)');
I have a code like this
ul.nav
li.item
a(href='#')
ul
li
a(href='#')
It converts to
<ul class="nav">
<li class="item">
<ul>
<li></li>
</ul>
</li>
</ul>
Expected result:
<ul class="nav">
<li class="item">
<ul>
<li>
</li>
</ul>
</li>
</ul>
How can I get a right indentation?
I have tried Whitespace Removal: > and < rules from http://scalate.fusesource.org/documentation/jade-syntax.html, but they don't work. What I am doing wrong?
Manually new lines between can be added with such command
= "\n"
so when your code looks like this:
ul.nav
li.item
a(href='#')
ul
li
= "\n"
a(href='#')
following output is produced:
<ul class="nav">
<li class="item">
<ul>
<li>
</li>
</ul>
</li>
</ul>
the only problem is that this command breaks tabulation indents.
Found on project issues page
You could use the html module to even more beautify your html. Add the following to your code:
var html = require('html');
var fn = jade.compile('string of jade', options); // standard jade example
console.log(html.prettyPrint(fn()))
Your output will be
<ul class="nav">
<li class="item">
<ul>
<li>
</li>
</ul>
</li>
</ul>
Make sure you are using the latest beautify-html.js.