Using jquery slice to get parent elements only

Using jquery slice to get parent elements only - javascript

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>

Related

Copy and get the first level of elements

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>

jQuery slideToggle doubling up..?

I am working on a mobile menu for this site:
http://giamberardino.com/_beta/team.html
When I click on "Showcase" it's toggle the slide of the entire menu as well as .mbl-dropdown. I would like it to just toggle the slide of .mbl-dropdown when .mbl-showcase is clicked on.
Where am I going wrong??
<nav class="mobile_menu">
<ul id="menuItems">
<li> Home </li>
<li><a href="company.html" > Company</a> </li>
<li class="mbl-showcase">Showcase
<ul class="mbl-dropdown">
<li>General Contracting</li>
<li>CUSTOMIZED MILLWORK</li>
<li>BUILDING RESTORATION</li>
</ul>
</li>
<li> Team </li>
<li><a href="careers.html" >Careers </a></li>
<li> Contact</li>
</ul>
</nav>
$(".mobile_menu_button").bind('click', function() {
$('.mobile_menu').slideToggle();
});
$(".mbl-showcase").bind('click', function() {
$('.mbl-dropdown').slideToggle();
$('.mobile_menu').stop().slideToggle();
});

First, You have to make it clear in your mind:
you have to hide the dropdown menu NOT the whole navbar , so you need to give the .mbl-dropdown a display:none.
then you just want to make the jquery code like that :
$(".mbl-showcase").on('click', function() {
$('.mbl-dropdown').slideToggle();
});
.mbl-dropdown{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="mobile_menu">
<ul id="menuItems">
<li> Home </li>
<li><a href="company.html" > Company</a> </li>
<li class="mbl-showcase">Showcase
<ul class="mbl-dropdown">
<li>General Contracting</li>
<li>CUSTOMIZED MILLWORK</li>
<li>BUILDING RESTORATION</li>
</ul>
</li>
<li> Team </li>
<li><a href="careers.html" >Careers </a></li>
<li> Contact</li>
</ul>
</nav>
that means if you click on the element with class .mbl-showcase wich is "Showcase" the dropdown will show if it is hidden and it will be hidden if it is shown and that what does toggle mean.
make sure you check again the toggle property http://api.jquery.com/toggle/
I hope I helped you

<nav class="mobile_menu">
<ul id="menuItems">
<li> Home </li>
<li><a href="company.html" > Company</a> </li>
<li class="mbl-showcase">Showcase
<ul class="mbl-dropdown">
<li>General Contracting</li>
<li>CUSTOMIZED MILLWORK</li>
<li>BUILDING RESTORATION</li>
</ul>
</li>
<li> Team </li>
<li><a href="careers.html" >Careers </a></li>
<li> Contact</li>
</ul>
</nav>
.mbl-showcase ul{
display:none;
}
$("#menuItems li").on('click', function() {
$(this).find(".mbl-dropdown").slideToggle()
});
Fiddler https://jsfiddle.net/zeqy9zfo/

Find id of element without class inside a specific element children

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

html overflow:hidden within dropdown-menu

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;
...
}

Bootstrap Inline List with Dropdown

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

Develop Reference

JavaScript is the programming language of the Web.

Using jquery slice to get parent elements only - javascript

Related

Copy and get the first level of elements

jQuery slideToggle doubling up..?

Find id of element without class inside a specific element children

html overflow:hidden within dropdown-menu

Bootstrap Inline List with Dropdown

Categories

Resources