We Keep Coding

jQuery hide elements of Widget Style ul li

I am designing a widget style using HTML ul tag.
<div class='tabs' style='width:50%'>
<ul>
<li id="basic-li"><a href='#basic_information'>Basic</a></li>
<li id="master-passenger-li"><a href='#master_passenger'>Master Passenger</a></li>
<li id="other-passenger-li"><a href='#all_passengers'>Other Passengers</a></li >
<li id="confirm-li"><a href='#confirm'>Confirmation</a></li>
</ul>
And I have 4 divs.
<div id="basic_information" class="tab">//content</div>
<div id="master_passenger" class="tab">//content</div>
<div id="other-passenger" class="tab">//content</div>
<div id="confirm" class="tab">//content</div>
I only want to show the li's href div that has currently been clicked. I only want to use HTML / CSS and jQuery.

This is the basic idea. You can improvise as per your need. I have set the target li's id as data attribute in to div where you will click. Now on click of that div i gets li's id so we can make that shown and all else li hide.
$(document).ready(function(){
$('.tab').click(function(){
$('.tabs li').hide();
var idTab = $(this).data('id');
$('#' + idTab).show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='tabs' style='width:50%'>
<ul>
<li id="basic-li"><a href='#basic_information'>Basic</a>
</li><li id="master-passenger-li"><a href='#master_passenger'>Master Passenger</a>
</li><li id="other-passenger-li"><a href='#all_passengers'>Other Passengers</a>
</li ><li id="confirm-li"><a href='#confirm'>Confirmation</a></li>
</ul>
</div>
<div id="basic_information" data-id="basic-li" class="tab">//basic info</div>
<div id="master_passenger" data-id="master-passenger-li" class="tab">//master passenger</div>
<div id="other-passenger" data-id="other-passenger-li" class="tab">//other passenger</div>
<div id="confirm" data-id="confirm-li" class="tab">//confirm</div>
Cheers...!!

This can be achieved via the following changes to your HTML, and the addition of the jQuery script below:
<ul>
<!-- add data-target attribute to each "a", with value matching corresponding tab -->
<li>
<a data-target="basic_information" href='#basic_information'>Basic</a>
</li>
<li>
<a data-target="master_passenger" href='#master_passenger'>Master Passenger</a>
</li>
<li>
<a data-target="other-passenger" href='#all_passengers'>Other Passengers</a>
</li>
<li>
<a data-target="confirm" href='#confirm'>Confirmation</a>
</li>
</ul>
<div id="basic_information" class="tab">//content</div>
<div id="master_passenger" class="tab">//content</div>
<div id="other-passenger" class="tab">//content</div>
<div id="confirm" class="tab">//content</div>
<script>
$(function() {
// Hide all tabs by default
$('.tab').hide()
// Assign click handler to all elements with data target attribute
$('[data-target]').click(function() {
// Hide all tabs
$('.tab').hide()
// Extra target id of the menu link that was clicked
var tabToShow = $(this).data('target')
// Show the corresponding tab
$('#' + tabToShow).show()
// Return false to prevent default navigation behaviour of links
return false
})
})
</script>

jquery selector li:selected

I am using simple jquery selector but unfortunately didn't get the required result.
my code is:
$(document).ready(function() {
var displayName = $('.divclass').find('ul').find('li:first').text();
if ($('.divclass').find('ul').find('li:selected').length) {
displayName = $('.divclass').find('ul').find('li:selected').text();
}
$('divclass').find('button').html(displayName);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="divclass">
<button data-toggle="dropdown" class="btn btn-primary dropdown-toggle" aria-expanded="true">
sometext
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
sometext1
</li>
<li selected="selected">
sometext2
</li>
<li>
sometext3
</li>
</ul>
</div>
I called it on document.ready. It executes but did not give me the proper result, what I am doing wrong to select the li with selected attribute.

:selected has a specific meaning: An option element that is currently selected. Perhaps somewhat counter-intuitively, that selected state is not reflected in an attribute (just the default) and again, it only applies to option elements.
selected isn't a valid attribute for li elements. You could either use data-selected for your own flag attribute, or a class.
If you used data-selected, you'd use [data-selected] in the selector:
<li selected="selected">
...find('ul').find('li[data-selected]').length...
...and then add/remove the attribute as appropriate.
If you use a class instead, it's a class selector:
<li class="selected">
...find('ul').find('li.selected').length...
...and then you add/remove the class as appropriate.

Combine the class selector with nth-child() or eq()

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');

Selector :not in jQuery not working

I have a body with ID body and inside it a div with class nav-container. I want to remove certain classes when users click on the #body, but not .nav-container (it's an overlay type of menu).
Tried below code
HTML:
<body id="body">
<div class="nav-container">
X
<nav class="display">
<ul>
<li> One </li>
<li> Two </li>
<li> Three </li>
</ul>
</nav>
</div>
</body>
jQuery
$('#body :not(.nav-container)').click(function() {
$('.cover').removeClass('active-cover');
$('.nav-container').removeClass('active');
});
It does not seem to be working for me though.

It wont work as not exclude the selected elements which pass the earlier css-selector criteria since .nav-container is not part of list that is selected by #body (wont be list in this case as its ID), so you wont be able to exclude that.
So basically what you need is
$(document).on("click", "div:not('.nav-container')",function() {
$('.cover').removeClass('active-cover');
$('.nav-container').removeClass('active');
});

the first element shouldn't be the parent, like #body, rather the element. for example div:not('example') works for every div except example.
$("div:not(.nav-container)").click(function() {
alert("nav-container was not clicked");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body id="body">
<div class="nav-container">
X
<nav class="display">
<ul>
<li> One </li>
<li> Two </li>
<li> Three </li>
</ul>
</nav>
</div>
<br />
<div>click here </div>
</body>

How to capture the value from a drop down list created using <ul> <li> tags

I have a drop down list having country names with their flag images. Since we cannot create such a list using <select> <option> tags, I created it using <ul> <li>. Now I want to capture the value selected by user and use it for some other purpose. How can I do it?
This is how the list has been created:
<form id="formId" action="" method="post" class="loginForm">
<fieldset id="localeSelect">
<div>
<div id="localeIndicator">
<a href="#" title="Select a country">
<span class="united-kingdom"></span>UK – English
</a>
</div>
<ul class="no-bullets block-list" role="tablist">
<li><span class="austria"></span>Austria</li>
</ul>
</div>
</fieldset>
<fieldset>
<input type="hidden" name="locale" />
<input type="submit" value="Continue" />
</fieldset>

You can do something like this.Have a look at fiddle
Fiddle Link
It will give you an idea.
$("#submit").click(function() {
alert("The selected Value is "+ $("ul").find(".selected").data("value"));
});

This might be a bit hacky solution but using data-* attribute to give each item a unique value (not always the best option, but certainly one of the most commonly used if you ask me).
<div id="my-div">
<ul>
<li data-src="info to get here">something</li>
</ul>
</div>
And with jQuery
$(document).ready(function() {
$("#my-div li").click(function() {
var data = $(this).attr("data-src");
});
});
You can style the li to be: cursor: pointer; to have a finger when you hover it.
selector li:hover { cursor: pointer; }
Here's a fiddle to show it