I need to know how many <div> elements are in each <li>. So something like that:
<ul>
<li>
<div> Some image 1 </div>
<div> Some image 2 </div>
<div> Some image 3 </div>
</li>
<li>
<div> Some image 4 </div>
<div> Some image 5 </div>
</li>
<li>
<div> Some image 6 </div>
<div> Some image 7 </div>
<div> Some image 8 </div>
<div> Some image 9 </div>
</li>
</ul>
The output of the function:
First <li> has 3 <div>
Second <li> has 2 <div>
Third <li> has 4 <div>
var lengths = $('li').map(function(){
return $(this).find('div').length;
}).get();
Live DEMO
Comments:
// Make an array when the input for every iteration is a <li>
$('li').map(
// Every element in the array is the amount <div>s inside the current <li>
return $(this).find('div').length;
// Produce the arry.
.get();
If you want to produce something similar to what you want easily:
$('li').each(function() {
var length = $(this).find('div').length;
$('<div> ' + length + ' li has ' + length + 'divs </div>').appendTo('#output');
});
Live DEMO
Output:
3 li has 3divs
2 li has 2divs
4 li has 4divs
Given a jQuery object representing your <li>, item, you can find out the number of <div>s that it contains just by doing:
item.find('div').length
But if you'd like a function with that exact output, you'll need a number → English library. Or, if you'll have exactly three, get your <ul> as list and do this:
var items = list.find('li');
'First <li> has ' + items.eq(0).find('div').length + ' <div>';
'Second <li> has ' + items.eq(1).find('div').length + ' <div>';
'Third <li> has ' + items.eq(2).find('div').length + ' <div>';
$('li').each(function() {
console.log($('div', this).length);
});
jsFiddle example.
$('li').each(function(i){
console.log('<li> ' + i + ' has ' + $(this).children('div').length + 'divs');
});
Related
Is there a way to add with regular Javascript to add a character to the text in a list element, but before an indented list occurs AND to have said character to not have an space between it and the original text? The actual text I have to use is not fixed.
Like, if I have this HTML:
<ul>
<li>Uno
<ul>
<li>One</li>
</ul>
</li>
<li>Dos
<ul>
<li>Two</li>
</ul>
</li>
</ul>
Use Javascript only to add a colon immediately after «Uno» and «Dos», like:
Uno:
One
Dos:
Two
But avoiding this result, which has an space in it (and pretty much any solution I can think of has that issue. I wouldn't had much control over the HTML as I want to use it between a regular WordPress page):
Uno :
One
Dos :
Two
//Get all LI which are immediate child of root UL
let immediateLi = document.querySelectorAll('body > ul > li');
//loop through the Li array and edit text node.
for(let li of immediateLi) {
li.childNodes[0].textContent = li.childNodes[0].textContent.trim() + ':'
}
//Important Note:
//I have selected 0th child-node from the array because it is the default text-node containing our text. In case you are not sure if 0th child-node will hold the text content then you may filter the child-node array.
<ul>
<li>Uno
<ul>
<li>One</li>
</ul>
</li>
<li>Dos
<ul>
<li>Two</li>
</ul>
</li>
</ul>
Here you go. I've also accounted for the case where the list item doesn't contain a nested unordered list.
document.querySelectorAll("ul li:not(ul ul li)").forEach(e => {
let html = e.innerHTML;
var index = html.indexOf("<ul>");
if(index == -1)
{
index = html.trim().length;
}
else
{
while(html[--index] == " " && index > 0){}
}
e.innerHTML = html.substr(0, index) + ":" + (
html.length > index ?
html.substr(index) :
""
);
});
<ul>
<li>Uno
<ul>
<li>One</li>
</ul>
</li>
<li>Dos
<ul>
<li>Two</li>
</ul>
</li>
<li>Tres </li>
</ul>
<ul class="level0">
<li class="level1" id="cat2441"></li>
<li class="level1" id="cat2450"></li>
<li class="level1" id="cat2455"></li>
</ul>
<div class="alles-zwei" id="new-cat2441"></div>
<div class="alles-zwei" id="new-cat2450"></div>
<div class="alles-zwei" id="new-cat2455"></div>
Hallo, on hover the li(id) element I would like to show the matching div(id) – and hover an another li (wrong id) or leaving the ul I would like to hide the div
my approach was
jQuery('.alles li').mouseover(function() {
var cat = '"#new-' + this.id + '"';
jQuery(cat).fadeIn();
});
You were using the wrong selectors. Also '"#new-' + this.id + '"' this syntax is wrong. There is no need to add those double quotes inside the string.
jQuery('.level0 li').hover(function() {
var cat = '#new-' + this.id;
jQuery(cat).show();
}, function() {
var cat = '#new-' + this.id;
jQuery(cat).hide();
});
.alles-zwei {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul class="level0">
<li class="level1" id="cat2441">cat2441</li>
<li class="level1" id="cat2450">cat2450</li>
<li class="level1" id="cat2455">cat2455</li>
</ul>
<div class="alles-zwei" id="new-cat2441">cat2441</div>
<div class="alles-zwei" id="new-cat2450">cat2450</div>
<div class="alles-zwei" id="new-cat2455">cat2455</div>
You could do this without having to rely on the id of the element just use the class of the two elements. When you select the class it gets returned as an array so you can match the level1 class array with the alles-zwei class array. It will also simplify your HTML code.
$('.level1').hover(function(){
// Gets the index of the current li emement.
var indx = $(this).index();
// Gets the div element based on the hovered li and hides its siblings.
$('.alles-zwei').eq(indx).show().siblings('div').hide();
});
In this example, a jQuery function is presented that when clicked, it prints out the old text and the new text of the element, plus the index of the current element. I'm pretty sure the index must increment (because new elements are being added). But upon testing the code, why is the index showing 0 all the time?
$("#btn1").click(function(){
$("#test1").text(function(i,origText){
return "Old text: " + origText + " New text: Hello world!
(index: " + i + ")";
});
});
$("#btn2").click(function(){
$("#test2").html(function(i,origText){
return "Old html: " + origText + " New html: Hello <b>world!</b>
(index: " + i + ")";
});
});
Have'nt you heard about w3fools.
I recommend you to follow jQuery official help.
function(index, text)
A function returning the text content to set. Receives the index position of the element in the set and the old text value as arguments.
The reason here index is always zero is it is only one p element so it always index 0. Lets say you have multiple li in list, on using index:
$( "ul li" ).text(function( index ) {
return "item number " + ( index + 1 );
});
will produce:
<ul>
<li>item number 1</li>
<li>item number 2</li>
<li>item number 3</li>
</ul>
Here is the same example re-written to explain index...
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$(".test1").text(function(i, origText){
return "Old text: " + origText + " New text: Hello world! (index: " + i + ")";
});
});
$("#btn2").click(function(){
$(".test1").html(function(i, origText){
return "Old html: " + origText + " New html: Hello <b>world!</b> (index: " + i + ")";
});
});
});
</script>
</head>
<body>
<p>This is a <b>bold</b> paragraph.</p>
<ul>
<li class="test1" >item number 1</li>
<li class="test1" >item number 2</li>
<li class="test1" >item number 3</li>
</ul>
<p class="test1">This is another <b>bold</b> paragraph.</p>
<button id="btn1">Show Old/New Text</button>
<button id="btn2">Show Old/New HTML</button>
</body>
</html>
I'm studying on W3schools right now and had the same question. Googling led me to this question and the answers are kind of cryptic. after fiddling with the code i found this and thought someone else might need a clearer answer.
I have a JavaScript code for generating select box by getting value from ul li menu.
html menu:
<ul class="menu">
<li>
<a class="menu-item active parent" href="#">
<span class="menu">
<span class="menu-title">Inspiration</span>
<span class="menu-desc">wow! Amazing </span>
</span>
</a>
</li>
</ul>
I want to get only <span class="menu-title"> text. my current javascript code gets text from both span.
here is javascript:
document.getElements('ul.menu a.menu-item').each(function (el) {
optText = ' ' + el.get('text');
NOTE: I can get text from the first span changing this getElements('ul.menu a.menu-item') to this getElements('ul.menu a.menu-item span.menu-title') but then some of my code will not work. So please change the second line
optText = ' ' + el.get('text');
Are you using an external library? I do not understand your javascript.
To get the contents of "menu-title", you would use this:
document.getElementsByClassName("menu-title")[0].innerHTML
Got the answer, I simply changed this;
optText = ' ' + el.get('text');
to:
optText = ' ' + el.getElements('span.menu-title').get('text');
anyway! friends thanks for help
I am trying understand why the .wrap() function in my basic table of contents function isn't working. The function filters headers from a textarea and places them in an iframe, and the basic part works. But whereas my desired output is this:
<ul>
<li class="toc_h2">This is an h2</li>
<li class="toc_h3">This is an h3</li>
<li class="toc_h1">This is an h1</li>
</ul>
What I am actually getting is this:
<ul>
<h2>This is an h2</h2>
<h3>This is an h3</h3>
<h1>This is an h1</h1>
</ul>
How can I fix this/what am I misunderstanding? The code is here and at http://jsfiddle.net/supertrue/JgWxJ/
headers.each(function(i) {
$(this).wrap('<li class="toc_' + this.nodeName.toLowerCase() + '"></li>').appendTo(toc);
});
You can change this:
$(this).wrap('<li class="toc_' + this.nodeName.toLowerCase() + '"></li>').appendTo(toc);
to this:
$('<li class="toc_' + this.nodeName.toLowerCase() + '"></li>').html(this).appendTo(toc);
Here's your fiddle: http://jsfiddle.net/JgWxJ/7/
Alternatively, you could just add .parent() before appending:
$(this).wrap('<li class="toc_' + this.nodeName.toLowerCase() + '"></li>').parent().appendTo(toc);
...and here's the fiddle: http://jsfiddle.net/JgWxJ/10/