Develop Reference

Find and disabled <a href>

I have weird structure and want to disabled first element inside li.expanded using a[href="/abc"]. I have parent and child have same href and title is different. How can I select parent only element?
Here the code:
<ul class="n-right m-menu__link-list" id="main-right-menu">
<li class="first leaf">xyz-parent</li>
<li class="leaf">pqr</li>
<li class="last expanded">abc //want to find this element and apply treatment
<ul class="n-right m-menu__link-list" id="main-right-menu">
<li class="first leaf">abc</li> //not this one
<li class="last leaf">mno</li>
</ul>
</li>
</ul>
What I have tried, the function is working. it's selecting both a[href="/abc"] parent and child. I want to find and select only parent one.
openabcInNav: function() {
var navEl = $('#main-menu, #main-right-menu li.expanded').find('a[href="/abc"]:nth-child(1)');
navEl.addClass('doNotClose');
navEl.on('click mouseover', function(event) {
event.preventDefault();
$('nav.global-nav').find('li.expanded').toggleClass('show');
});
},

You could use the :first selector that will return the first occurrence what it the parent :
$('ul>li.expanded>a[href="/abc"]:first')
$('ul>li.expanded>a[href="/abc"]:first').css('background-color', 'green');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="n-right m-menu__link-list" id="main-right-menu">
<li class="first leaf">xyz-parent</li>
<li class="leaf">pqr</li>
<li class="last expanded">abc //want to find this element and apply treatment
<ul class="n-right m-menu__link-list" id="main-right-menu">
<li class="first leaf">abc</li> //not this one
<li class="last leaf">mno</li>
</ul>
</li>
</ul>

a[href="/abc"]:nth-child(1) looks at first child object inside a[href="/abc"]
Try using:
a[href="/abc"]:nth-of-type(1)
This will return the first that matches a[href="/abc"]

Twin unordered lists

So i have this structure:
<ul>
<li class="paginator"><a class="active">1</a></li>
<li class="paginator"><a>2</a></li>
<li class="paginator"><a>3</a></li>
</ul>
... bunch of html code
<ul>
<li class="paginator"><a class="active">1</a></li>
<li class="paginator"><a>2</a></li>
<li class="paginator"><a>3</a></li>
</ul>
Which is an unordered anchor, every time the user clicks on an anchor it becomes of the active class. My question is: What's the best way to duplicate this effect on both anchors. So far, when i click on the anchor 2 of the bottom, it succesfully get the active class, but the anchor 2 of top doesn't. Is there a way to have something like twin or cloned elements?

You can get the index of the clicked li.paginator element, and set the active class to any other li.paginator with the same index using nth-child, that way the class gets added to both UL's
var lis = $('.paginator').on('click', function(e) {
e.preventDefault();
var idx = $(this).closest('li').index();
lis.find('a').removeClass('active');
lis.filter(':nth-child('+(idx+1)+')').find('a').addClass('active');
});
a {cursor : pointer}
a.active {
text-decoration: underline;
color: red!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="paginator"><a class="active">test 1</a></li>
<li class="paginator"><a>test 2</a></li>
<li class="paginator"><a>test 3</a></li>
</ul>
<!-- ... bunch of html code -->
<ul>
<li class="paginator"><a class="active">test 1</a></li>
<li class="paginator"><a>test 2</a></li>
<li class="paginator"><a>test 3</a></li>
</ul>

If you set it up like this is should work the same for both ul elements, unless you are wanting the elements to mirror each other:
$('.paginator').click(function(){ $(this).find('a').addClass("active") });

get clicked element in javascript?

I want add class to clicked li and delete other li class
<ul>
<li onclick="s()"><span>خانه</span></li>
<li onclick="s()"><span>سفارش</span></li>
<li onclick="s()" class="selected"><span>آپلود</span></li>
<li onclick="s()"><span>درباره ما</span></li>
<li onclick="s()"><span>تنظیمات</span></li>
</ul>
I can do it with jquery but now i want do this with javascript?

Don't use inline click handlers. Instead, attach a handler from JavaScript.
<ul id="myUL"> <!-- This is just for example, to make it easier to select -->
<li><span>خانه</span></li>
<li><span>سفارش</span></li>
<li class="selected"><span>آپلود</span></li>
<li><span>درباره ما</span></li>
<li><span>تنظیمات</span></li>
</ul>
Then, in JavaScript:
var myUL = document.querySelector('#myUL');
// Attach one event listener on the parent, instead of one for each element.
// It's more performant and will work with dynamically added entries!
myUL.addEventListener('click', function(event) {
// Here, event.target is the actual event clicked.
// Remove class from selected one.
document.querySelector('#myUL .selected').classList.remove('selected');
// And add it to the current one
event.target.classList.add('selected');
});
Working Example

This is a quick fix and this way is not recommended. But in your case, you need to use this way:
function s (which) {
document.querySelectorAll(".clicked")[0].classList.remove("selected");
which.classList.add("selected");
}
And change the call this way:
<ul>
<li onclick="s(this)"><span>خانه</span></li>
<li onclick="s(this)"><span>سفارش</span></li>
<li onclick="s(this)" class="selected"><span>آپلود</span></li>
<li onclick="s(this)"><span>درباره ما</span></li>
<li onclick="s(this)"><span>تنظیمات</span></li>
</ul>
The right way is to use eventListeners and bind the events to an ID.
var list = document.querySelector('#menu');
list.addEventListener('click', function(event) {
list.querySelector('.selected').classList.remove('selected');
event.target.classList.add('selected');
});
And add the ID to the <ul>:
<ul id="menu">
<li>خانه</li>
<li>سفارش</li>
<li class="selected">آپلود</li>
<li>درباره ما</li>
<li>تنظیمات</li>
</ul>

click on li if no leaf node its append in another div

I have one Activity xml file and I am try to get from activity when click on activity there child display. Its look like end of the all click.
<ul id="firstLevelChild">
<ul id="ul">
<li id="4">Activities
<ul class="ul">
<li id="10066">Physical1
<ul class="ul">
<li id="10067">Cricket
<ul class="ul">
<li id="10068">One Day</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</ul>
Now I want that if li have no leaf node then its display in other another div. Something like:
Click on Acitivities there have child node Physical1 and there also child Cricket and there chil One Day now one day have no child when click on one day its display in my <div id="result"></div>

I would add this as a comment, but I don't have enough rep. ChildNodes() isn't a function - since it looks like you're using jQuery, try children() instead.

I think javascript could helpr you there. A part from the fact that you first build your DOM correct ;)
The hasChildNodes() method returns TRUE if the current element node has child nodes, and FALSE otherwise.
http://www.w3schools.com/dom/met_element_haschildnodes.asp

Assuming the markup you provided is how it's going to be always i.e. ul as child for all li. You just check if ul exists inside the current li. See fiddle
HTML
<div id="content">
<ul id="firstLevelChild">
<li>
<ul id="ul">
<li id="4">Activities
<ul class="ul">
<li id="10066">Physical1
<ul class="ul">
<li id="10067">Cricket
<ul class="ul">
<li id="10068">One Day</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<h2>Result</h2>
<ul id="result"></ul>
JS
$('#content li').each(function (i) {
//for display purpose only
$('#content').append('<span class="list">li(' + i + '):' + $('ul', $(this)).length + '</span>');
//the code you needed
if ($('ul', $(this)).length < 1) {
$(this).on('click', function () {
$('#result').append($(this).parent().html());
});
}
});

active class javascript

I have used the following code to display menu
<ul id="menu">
<li id="11">Start a League<span></span></li>
<li id="12">Roster Settings<span></span></li>
<li id="13">Draft Settings<span></span></li>
<li id="14">Transaction Settings<span></span></li>
<li id="15">Playoff Settings<span></span></li>
<li id="16">Launch Your League!<span></span></li>
</ul>
If I click any menu the class active should be added in that particular li. How can i do it with javascript.

Using jQuery:
$("li").click(function() {
$("li").removeClass("active");
$(this).addClass("active");
});
I supposed that you only wanted a single <li> with the active class.
Demo: http://jsfiddle.net/j9qTE/1/