I'm trying to figure out how I can get the first-level lists of elements without the child elements below. So only Program 1, Program 2, Program 3 and Program 4 are the only items or elements I need to get.
Can't seem to find a solution on how I can accomplish it. This is just a sample code in the project I'm working and the markup cannot be edited to add specific classes.
var menuContainer = $('<ul class="menu" />');
var nonDegMenu = $('#header a[href$="/programs"]').next().clone(),
nonDegList = $('li', nonDegMenu),
nonDeg = $('#footer .programs-menu .non-degree'),
items = menuContainer.appendTo(nonDeg),
course = nonDegList.slice(0);
//Append Non Degree Courses
items.append(course);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div id="header">
<ul>
<li>
Programs
<ul>
<li>
Programs 1
<ul>
<li><a href="#" >Program A</a></li>
<li><a href="#" >Program B</a></li>
<li><a href="#" >Program C</a></li>
<li><a href="#" >Program D</a></li>
</ul>
</li>
<li>
Programs 2
<ul>
<li><a href="#" >Program E</a></li>
<li><a href="#" >Program F</a></li>
<li><a href="#" >Program G</a></li>
<li><a href="#" >Program H</a></li>
</ul>
</li>
<li>
Programs 3
<ul>
<li><a href="#" >Program I</a></li>
<li><a href="#" >Program J</a></li>
<li><a href="#" >Program K</a></li>
<li><a href="#" >Program L</a></li>
</ul>
</li>
<li>
Programs 4
<ul>
<li><a href="#" >Program M</a></li>
<li><a href="#" >Program N</a></li>
<li><a href="#" >Program O</a></li>
<li><a href="#" >Program P</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div id="footer" >
<div class="programs-menu">
<div class="non-degree">
</div>
</div>
</div>
To achieve this you can use the child selector, >, to get the child ul elements and remove them from the cloned ul. Try this:
var $menuContainer = $('<ul class="menu" />');
var $nonDegMenu = $('#header a[href$="/programs"]').next().clone();
var $items = $menuContainer.appendTo('#footer .programs-menu .non-degree');
$nonDegMenu.find('li > ul').remove();
$items.append($nonDegMenu);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div id="header">
<ul>
<li>
Programs
<ul>
<li>
Programs 1
<ul>
<li>Program A</li>
<li>Program B</li>
<li>Program C</li>
<li>Program D</li>
</ul>
</li>
<li>
Programs 2
<ul>
<li>Program E</li>
<li>Program F</li>
<li>Program G</li>
<li>Program H</li>
</ul>
</li>
<li>
Programs 3
<ul>
<li>Program I</li>
<li>Program J</li>
<li>Program K</li>
<li>Program L</li>
</ul>
</li>
<li>
Programs 4
<ul>
<li>Program M</li>
<li>Program N</li>
<li>Program O</li>
<li>Program P</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div id="footer">
<div class="programs-menu">
<div class="non-degree"></div>
</div>
</div>
Related
I have this code that I'm trying to figure. Basically what I need is to slice or copy only the parent elements which Program 1, Program 2, Program 3 and Program 4 inside the list and not including the child elements.
I can't seem to find an answer in my problem and I believe you cannot get specific elements using jQuery slice
var menuContainer = $('<ul class="menu" />');
var nonDegMenu = $('#header a[href$="/programs"]').next().clone(),
nonDegList = $('li', nonDegMenu),
nonDeg = $('#footer .programs-menu .non-degree'),
items = menuContainer.appendTo(nonDeg),
course = nonDegList.slice(0);
//Append Non Degree Courses
items.append(course);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div id="header">
<ul>
<li>
Programs
<ul>
<li>
Programs 1
<ul>
<li><a href="#" >Program A</a></li>
<li><a href="#" >Program B</a></li>
<li><a href="#" >Program C</a></li>
<li><a href="#" >Program D</a></li>
</ul>
</li>
<li>
Programs 2
<ul>
<li><a href="#" >Program E</a></li>
<li><a href="#" >Program F</a></li>
<li><a href="#" >Program G</a></li>
<li><a href="#" >Program H</a></li>
</ul>
</li>
<li>
Programs 3
<ul>
<li><a href="#" >Program I</a></li>
<li><a href="#" >Program J</a></li>
<li><a href="#" >Program K</a></li>
<li><a href="#" >Program L</a></li>
</ul>
</li>
<li>
Programs 4
<ul>
<li><a href="#" >Program M</a></li>
<li><a href="#" >Program N</a></li>
<li><a href="#" >Program O</a></li>
<li><a href="#" >Program P</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div id="footer" >
<div class="programs-menu">
<div class="non-degree">
</div>
</div>
</div>
Make these changes to your code:
Change nonDegList to this: nonDegList = $('li a', nonDegMenu)
Now you can just append course to items like this: items.append(course)
See demo below:
var menuContainer = $('<ul class="menu" />');
var nonDegMenu = $('#header a[href$="/programs"]').next().clone(),
nonDegList = $('li a', nonDegMenu),
nonDeg = $('#footer .programs-menu .non-degree'),
items = menuContainer.appendTo(nonDeg),
course = nonDegList;
//Append Non Degree Courses
items.append(course);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
<ul>
<li>
Programs
<ul>
<li>
Programs 1
<ul>
<li>Sub Programs A</li>
<li>Sub Programs B</li>
<li>Sub Programs C</li>
<li>Sub Programs D</li>
</ul>
</li>
<li>
Programs 2
<ul>
<li>Sub Programs E</li>
<li>Sub Programs F</li>
<li>Sub Programs G</li>
<li>Sub Programs H</li>
</ul>
</li>
<li>
Programs 3
<ul>
<li>Sub Programs I</li>
<li>Sub Programs J</li>
<li>Sub Programs K</li>
<li>Sub Programs L</li>
</ul>
</li>
<li>
Programs 4
<ul>
<li>Sub Programs M</li>
<li>Sub Programs N</li>
<li>Sub Programs O</li>
<li>Sub Programs P</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div id="footer">
<div class="programs-menu">
<div class="non-degree">
</div>
</div>
</div>
I'm looking for a way on how I can output or get the first level of lists which is Program 1, Program 2, Program 3 and Program 4 but not including the child lists or child elements inside of it.
As it appears you're interested in the text "which is Program 1.." and don't need the items themselves, you can extract this "first level" of lists into an array using:
var list = $("#header>ul>li>ul>li>a").map(function() {
return $(this).text();
}).get()
(this appears to be the second-level to me as the first level would be #header>ul>li>a and give just Programs).
Normally it would be better to add classes or different <h1> <h2> levels which would make finding the items easier and less brittle, but (as per comments) this is not an option.
You can then use .slice as needed. If you need the first, it would be:
list.slice(0,1);
this would be the same as:
list[0];
Note that .slice(0) will return all the items so has no effect. Omitting the second argument extracts through the end of the sequence (arr.length).
If you need the links themselves (the whole node, not just its text) then there's no need for map:
var list = $("#header>ul>li>ul>li>a");
items.append(list);
the purpose of .slice is for example I want items Program 2, Program 3 and Program 4. Excluding Program 1 from the list
You can use .slice against the jquery array, using the correct arguments.
To exclude the first (see code snippet for working example of this):
list.slice(1);
to get first 2 items:
list.slice(0,2)
More info on slice: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/slice
//var list = $("#header>ul>li>ul>li>a").map(function() { console.log($(this).text()); return $(this) }).get()
var list = $("#header>ul>li>ul>li>a")
$("#course").append(list.slice(1))
#course a { display:block; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<hr/>
<div id='course'></div>
<hr/>
<div id="header">
<ul>
<li>
Programs
<ul>
<li>
Programs 1
<ul>
<li><a href="#" >Program A</a></li>
<li><a href="#" >Program B</a></li>
<li><a href="#" >Program C</a></li>
<li><a href="#" >Program D</a></li>
</ul>
</li>
<li>
Programs 2
<ul>
<li><a href="#" >Program E</a></li>
<li><a href="#" >Program F</a></li>
<li><a href="#" >Program G</a></li>
<li><a href="#" >Program H</a></li>
</ul>
</li>
<li>
Programs 3
<ul>
<li><a href="#" >Program I</a></li>
<li><a href="#" >Program J</a></li>
<li><a href="#" >Program K</a></li>
<li><a href="#" >Program L</a></li>
</ul>
</li>
<li>
Programs 4
<ul>
<li><a href="#" >Program M</a></li>
<li><a href="#" >Program N</a></li>
<li><a href="#" >Program O</a></li>
<li><a href="#" >Program P</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div id="footer" >
<div class="programs-menu">
<div class="non-degree">
</div>
</div>
</div>
I'm working with an Accordion- I have a list inside the accordion with an class of area-list I want to count how many list items exist inside this list, store that number into a variable. I have a span I want to update with the count of area-list. I have to do this on multiple accordions. Thanks in advance.
<ul class="accordion" data-accordion data-allow-all-closed="true">
<li class="accordion-item" data-accordion-item>
Accounting (<span class="counter">1000</span>)
<div class="accordion-content" data-tab-content>
<ul class="no-bullet area-list">
<li><a class="naming" href="#">Benny Goodman</a></li>
<li><a class="naming" href="#">Benny Goodman</a></li>
<li><a class="naming" href="#">Benny Goodman</a></li>
</ul>
</div>
</li>
</ul>
<ul class="accordion" data-accordion data-allow-all-closed="true">
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">Accounting 2 (<span
class="counter">1000</span>)</a>
<div class="accordion-content" data-tab-content>
<ul class="no-bullet area-list">
<li><a class="naming" href="#">Benny Goodman</a></li>
<li><a class="naming" href="#">Benny Goodman</a></li>
<li><a class="naming" href="#">Benny Goodman</a></li>
<li><a class="naming" href="#">Benny Goodman</a></li>
<li><a class="naming" href="#">Benny Goodman</a></li>
<li><a class="naming" href="#">Benny Goodman</a></li>
</ul>
</div>
</li>
</ul>
<script>
function getCounter(){
var count = $("#myList li").length;
$("span.counter").text(count);
}
getCounter();
</script>
This should sum up the elements of each accordion.
$(function() {
$(".accordion").each(function() {
var count = $(this).find(".area-list").children("li").length;
$(this).find(".counter").text(count);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="accordion" data-accordion="" data-allow-all-closed="true">
<li class="accordion-item" data-accordion-item="">
<a class="accordion-title" href="#">Accounting (<span class="counter">1000</span>)</a>
<div class="accordion-content" data-tab-content="">
<ul class="no-bullet area-list">
<li>
<a class="naming" href="#">Benny Goodman</a>
</li>
<li>
<a class="naming" href="#">Benny Goodman</a>
</li>
<li>
<a class="naming" href="#">Benny Goodman</a>
</li>
</ul>
</div>
</li>
</ul>
<ul class="accordion" data-accordion="" data-allow-all-closed="true">
<li class="accordion-item" data-accordion-item="">
<a class="accordion-title" href="#">Accounting 2 (<span class="counter">1000</span>)</a>
<div class="accordion-content" data-tab-content="">
<ul class="no-bullet area-list">
<li>
<a class="naming" href="#">Benny Goodman</a>
</li>
<li>
<a class="naming" href="#">Benny Goodman</a>
</li>
<li>
<a class="naming" href="#">Benny Goodman</a>
</li>
<li>
<a class="naming" href="#">Benny Goodman</a>
</li>
<li>
<a class="naming" href="#">Benny Goodman</a>
</li>
<li>
<a class="naming" href="#">Benny Goodman</a>
</li>
</ul>
</div>
</li>
</ul>
Use jQuery's children() (docs).
function getCounter(){
var count = $("#myList").children('li').length;
$("span.counter").text(count);
}
I figured it out, I needed to write this to be more vague so I could use it on multiple instances of the accordion. Thanks Everyone!
function getCounter(){
var count = $(this).find(".area-list").children('li').length;
$(this).find("span.counter").text(count);
}
$(".accordion").each(getCounter);
If I have this html code:
<ul id="tabs">
<li><a id="tabb1" href="#tab1" data-translate="pagtab5" onclick="CaricaVisualizzaTab(1)">Tightening Torques</a>
</li>
<li><a id="tabb2" href="#tab2" data-translate="pagtab6" onclick="CaricaVisualizzaTab(2)" class="inactive">Specifications</a>
</li>
<li><a id="tabb3" href="#tab3" data-translate="pagtab7" onclick="CaricaVisualizzaTab(3)" class="inactive">Technical Data</a>
</li>
As you see there are two <li> elements with the inactive class.
I tried to do this and I have
$("#tabs").children();
But how can I search the specific <li> without class inactive?
Thanks for any help
$('#tabs li a').not('.inactive').css('color','red')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="tabs">
<li><a id="tabb1" href="#tab1" data-translate="pagtab5" onclick="CaricaVisualizzaTab(1)">Tightening Torques</a>
</li>
<li><a id="tabb2" href="#tab2" data-translate="pagtab6" onclick="CaricaVisualizzaTab(2)" class="inactive">Specifications</a>
</li>
<li><a id="tabb3" href="#tab3" data-translate="pagtab7" onclick="CaricaVisualizzaTab(3)" class="inactive">Technical Data</a>
</li>
</ul>
Use method .not()
Description: Remove elements from the set of matched elements.
Use :not() and :has() pseudo-class selectors.
$("#tabs").children(':has(>:not(.inactive))');
// or with a single selector
$("#tabs > :has(>:not(.inactive))");
console.log($("#tabs").children(':has(>:not(.inactive))').length);
// or with a single selector
console.log($("#tabs > :has(>:not(.inactive))").length);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="tabs">
<li><a id="tabb1" href="#tab1" data-translate="pagtab5" onclick="CaricaVisualizzaTab(1)">Tightening Torques</a>
</li>
<li><a id="tabb2" href="#tab2" data-translate="pagtab6" onclick="CaricaVisualizzaTab(2)" class="inactive">Specifications</a>
</li>
<li><a id="tabb3" href="#tab3" data-translate="pagtab7" onclick="CaricaVisualizzaTab(3)" class="inactive">Technical Data</a>
</li>
UPDATE 1 : Or without using jQuery :has() instead using parent() method.
$("#tabs > li > :not(.inactive)").parent()
console.log($("#tabs>li>:not(.inactive)").parent().length);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="tabs">
<li><a id="tabb1" href="#tab1" data-translate="pagtab5" onclick="CaricaVisualizzaTab(1)">Tightening Torques</a>
</li>
<li><a id="tabb2" href="#tab2" data-translate="pagtab6" onclick="CaricaVisualizzaTab(2)" class="inactive">Specifications</a>
</li>
<li><a id="tabb3" href="#tab3" data-translate="pagtab7" onclick="CaricaVisualizzaTab(3)" class="inactive">Technical Data</a>
</li>
UPDATE 2 : If you just want to select the a tag then :not() is enough to get it with a single selector string.
$("#tabs > li > :not(.inactive)")
$("#tabs>li>:not(.inactive)").css('color', 'red');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="tabs">
<li><a id="tabb1" href="#tab1" data-translate="pagtab5" onclick="CaricaVisualizzaTab(1)">Tightening Torques</a>
</li>
<li><a id="tabb2" href="#tab2" data-translate="pagtab6" onclick="CaricaVisualizzaTab(2)" class="inactive">Specifications</a>
</li>
<li><a id="tabb3" href="#tab3" data-translate="pagtab7" onclick="CaricaVisualizzaTab(3)" class="inactive">Technical Data</a>
</li>
You can use .not() function
$("#tabs").find('a').not('.inactive');
You can use following code
$('ul#list li:not([class])')
in your case [class] will be inactive
By using javascript we can complete this way:-
var liWithoutHtml = document.getElementById('tabs').querySelector("li>a:not(.completed):not(.selected)");
alert(liWithoutHtml.innerHTML)
Jsfiddle link
I'm trying to solve an overflow problem in my slyding dropdown menu.
For slyding I'm using the als-js framework. The problem is, if I set the overflow:hidden attribute my dropdown menu is not visibly anymore.
If I just set the overflow-x:hidden I'm getting a scrollbar.
<div class="als-container" id="cssmenu"> <span class="als-prev"><img src="back.png" alt="back" title="previous" /></span>
<div class="als-viewport">
<ul class="als-wrapper">
<li class='als-item active'><a href='index.html'>Home</a>
<ul>
<li class='final'><a href='#'>Test 1</a>
</li>
<li class='final'><a href='#'>Test 2</a>
</li>
</ul>
<li class=' als-item has-sub '><a href='#'>Products</a>
<ul>
<li class='final'><a href='#'>Product 1</a>
</li>
<li class='final'><a href='#'>Product 2</a>
</li>
<li class='final'><a href='#'>Product 2</a>
</li>
<li class='final'><a href='#'>Product 2</a>
</li>
<li class='final'><a href='#'>Product 2</a>
</li>
<li class='final'><a href='#'>Product 2</a>
</li>
</ul>
</li>
<li class="als-item"><a href='#'>About</a>
</li>
<li class='als-item active'><a href='index.html'>Admin</a>
</li>
<li class='als-item active'><a href='index.html'>Route</a>
</li>
</ul>
</div>
jQUery:
$(document).ready(function () {
$("#cssmenu").als({
visible_items: 4,
scrolling_items: 2,
orientation: "horizontal",
circular: "yes",
autoscroll: "no"
});
});
Here is the link to my fiddle.
http://jsfiddle.net/9zapu02q/11/
Perhaps somebody could help me to find a solution.
SOLUTION
Your div.als-viewport must have a greater height... but you asl script is setting the div height, so you need to use " IMPORTANT " to override the value.
.als-viewport {
height: 300px !IMPORTANT;
...
}
I'm using Bootstrap 3 with the list-inline class (I know I could use the default, but I don't want any of the default styling)
<nav class='main-nav'>
<ul class="list-inline">
<li><a href='#'>Test</a></li>
<li>
Test
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li><a href='#'>Test</a></li>
<li><a href='#'>Test</a></li>
<li><a href='#'>Test</a></li>
</ul>
</li>
</ul>
</nav>
http://jsfiddle.net/9kVCZ/
But the dropdown doesn't appear under, it appears way at the bottom.
You need to add the class dropdown to your nav element.
<nav class='main-nav dropdown'>
<ul class="list-inline">
<li><a href='#'>Test</a></li>
<li>
Test
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li><a href='#'>Test</a></li>
<li><a href='#'>Test</a></li>
<li><a href='#'>Test</a></li>
</ul>
</li>
</ul>
</nav>
Working Fiddle
If the goal of your code is to show the dropdown menu just by clicking on the second "Test", you should add the class dropdown to its parent <li>
<nav class='main-nav'>
<ul class="list-inline">
<li><a href='#'>Test1</a></li>
<li class="dropdown">
Test2
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li><a href='#'>Test</a></li>
<li><a href='#'>Test</a></li>
<li><a href='#'>Test</a></li>
</ul>
</li>
</ul>
</nav>
Updated fiddle