Develop Reference

Using jquery slice to get parent elements only

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>

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 - has children without ANY class (not specific class)

So, guys, basically what I need to find:
----> All <li> which has <ul> without ANY class.
In this example I would ONLY want the <li> parent of the commented <ul>:
HTML
<ul id="myList">
<li>
<a>Item 1</a>
<ul class="someClass">
</ul>
</li>
<li> <!--------- Just Need This One ---------->
<a>Item 2</a>
<ul>
</ul>
</li>
<li>
<a>Item 3</a>
<ul class="justAnotherClass">
</ul>
</li>
</ul>
I'm aware of .not("[class]"), and so I tried something like:
$('#myList li').has('ul').not("[class]")
which obviously doesn't work because jQuery is looking for <li>'s which have a nested <ul> but doesn't have any class.
So, guys, can anyone please help? :)

Instead of using
$('#myList li').has('ul').not("[class]")
you can use
$('#myList > li').has('ul:not([class])')
you can also use this selector
$('#myList > li:has(ul:not([class]))')
$('#myList > li:has(ul:not([class]))').css('background' , 'red');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="myList">
<li>
<a>Item 1</a>
<ul class="someClass">
</ul>
</li>
<li>
<a>Item 2</a>
<ul> <!--------- Just Need This One ---------->
</ul>
</li>
<li>
<a>Item 3</a>
<ul class="justAnotherClass">
</ul>
</li>
</ul>

Use filter() over li and then check for children ul without any class with .length,
$('#myList li').filter(function(){
return $('ul:not([class])',this).length > 0 //$('child','context') selector
//or $('> ul:not([class])',this) in case of direct <ul>
});
var $li = $('#myList li').filter(function(){
return $('ul:not([class])',this).length > 0 //$('child','context') selector
});
console.log($li)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul id="myList">
<li>
<a>Item 1</a>
<ul class="someClass">
</ul>
</li>
<li>
<a>Item 2</a>
<ul> <!--------- Just Need This One ---------->
</ul>
</li>
<li>
<a>Item 3</a>
<ul class="justAnotherClass">
</ul>
</li>
</ul>

Try $('#myList li ul').filter(':not([class])'):
console.log($('#myList li ul').filter(':not([class])').html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<ul id="myList">
<li>
<a>Item 1</a>
<ul class="someClass">
</ul>
</li>
<li>
<a>Item 2</a>
<ul> <!--------- Just Need This One ---------->
</ul>
</li>
<li>
<a>Item 3</a>
<ul class="justAnotherClass">
</ul>
</li>
</ul>

I really hate that 'too short to be an answer' ....
$('#myList li > ul:not([class])')
Seems to be the simplest one that does the job ?

span onclick does not work jquery

I have a treeview structure created with css and jquery. To expand a node I want the user to click on a <span> within the <li> (it's an image) and not on the node itself.
So here is my HTML part :
<div class="tree">
<ul>
<li class="parent active"><span class="expand"></span><a>Level 1</a>
<ul>
<li><span class="expand"></span><a>Level 2</a></li>
<li><span class="expand"></span><a>Level 2</a></li>
<li><span class="expand"></span><a>Level 2</a></li>
<li><span class="expand"></span><a>Level 2</a></li>
</ul>
</li>
<li class="parent active"><span class="expand"></span><a>Level 1</a>
<ul>
<li class="parent active"><span class="expand"></span><a>Level 2</a>
<ul>
<li class="parent active"><span class="expand"></span><a>Level 3</a>
<ul>
<li><a>Level 4</a></li>
</ul>
</ul>
</li>
<li><span class="expand"></span><a>Level 2</a></li>
</ul>
</li>
</ul>
</div>
Here's the JS part for the clikc event on span (but it doesn't work) :
$( '.tree li.parent > span.expand' ).click( function( ) {
$( this ).parent().toggleClass( 'active' );
$( this ).parent().children( 'ul' ).slideToggle( 'fast' );
});
However, the following code works but by clicking on the <a> within the <li> :
$( '.tree li.parent > a' ).click( function( ) {
$( this ).parent().toggleClass( 'active' );
$( this ).parent().children( 'ul' ).slideToggle( 'fast' );
});
I need to expand the nodes by clicking on the span because when clicking on the node I need to redirect to another page to display its details.
Please see this jsfiddle that a created for this question.
So why the click event on span does not work ?

The issue is with css. Tag a is overlapping your span. Replace padding with margin and everything will start working.
Upd.: Actually - remove display:block from your rules for a tag
fiddle: http://jsfiddle.net/8ucy1gjb/2/

You are missing a closing </li> tag:
<div class="tree">
<ul>
<li class="parent active"><span class="expand"></span><a>Level 1</a>
<ul>
<li><span class="expand"></span><a>Level 2</a></li>
<li><span class="expand"></span><a>Level 2</a></li>
<li><span class="expand"></span><a>Level 2</a></li>
<li><span class="expand"></span><a>Level 2</a></li>
</ul>
</li>
<li class="parent active"><span class="expand"></span><a>Level 1</a>
<ul>
<li class="parent active"><span class="expand"></span><a>Level 2</a>
<ul>
<li class="parent active"><span class="expand"></span><a>Level 3</a>
<ul>
<li><a>Level 4</a></li>
</ul>
</li> <!-----I Was Missing!-->
</ul>
</li>
<li><span class="expand"></span><a>Level 2</a></li>
</ul>
</li>
</ul>
</div>

Instead of using padding use margin for this class
.tree li.parent > a {
padding: 0 0 0 28px;
}
replace it with :
.tree li.parent > a {
margin: 0 0 0 28px;
}
as it is now your a tag overlays the span.expand so it's not clickable.
Fiddle

in your CSS selector you have .tree li.parent > span.expand. This selector is wrong for your markup. What this is looking for is
<div class="tree">
<ul>
<li class="parent">
<span class="expand"></span>
</li>
</ul>
</div>
That > means direct child, which you don't have. Just remove that, and you should be fine.
$(".tree li.parent span.expand").on('click', function() {});
Edit As it was pointed out to me, I missed the top level <span class="expand">. The click event would work for that top level, but wouldn't work on any of the inner ones. I would still recommend changing the CSS selector if you'd like it to click through on all of them.

Bootstrap tabbed pane doesn't works

I'm making a modal tabbed pane in bootstrap according to guide. Here is fiddle and code:
$(document).on("click","#tabs a",function(event)
{
alert("!!!");
event.preventDefault();
$(this).tab('show');
})
This doesn't works (content of tabs isn't shown). What is my mistake? Do I activate tabs wrong or what?

You didn't include the hash in the href for the tabs, updated fiddle.
<ul class='nav nav-tabs' role='tablist' id='tabs'>
<li class='active'><a href='#forPhys' role='tab' data-toggle='tab'>For individuals</a></li>
<li><a href='#forOrg' role='tab' data-toggle='tab'>For organisations</a></li>
</ul>

You simply need to add a # in the href, so that it knows its looking for a ID of an element.
<ul class='nav nav-tabs' role='tablist' id='tabs'>
<li class='active'><a href='#forPhys' role='tab' data-toggle='tab'>For individuals</a></li>
<li><a href='#forOrg' role='tab' data-toggle='tab'>For organisations</a></li>
</ul>
http://jsfiddle.net/52VtD/8212/

try this
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<ul class='nav nav-tabs' role='tablist' id='tabs'>
<li class='active'><a href='#forPhys' role='tab' data-toggle='tab'>For individuals</a></li>
<li><a href='#forOrg' role='tab' data-toggle='tab'>For organisations</a></li>
</ul>

You've forget the "#" on the href. See
<ul class='nav nav-tabs' role='tablist' id='tabs'>
<li class='active'>
For individuals
</li>
<li>
<a href='#forOrg' role='tab' data-toggle="tab">
For organisations</a>
</li>
</ul>