We Keep Coding

Want to Change css of third child element n jquery

I have created something like this, but it's not working. If I assign it to li then it works fine.
function activetab() {
$(".nav-tabs li a:nth-child(3)").css("color", "red");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav-tabs">
<li>abcd</li>
<li>xyzv</li>
<li>xyzv</li>
</ul>
<button onclick="activetab()">Click</button>

The issue is because all the a elements are at the 0th index of their parent li elements. If you want the third one, you need to declare the :nth-child selector on the li elements instead.
Also note that you shouldn't be using on* event attributes as they are very outdated. As you've included jQuery in the page, use that to attach your event handlers. You should also avoid using css() where possible, as it ties the UI and JS logic too closely when they should be entirely separate entities. To achieve that, use addClass(), like this:
$(function() {
$('button').click(function() {
$(".nav-tabs li:nth-child(3) a").addClass('foo');
});
});
.foo {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav-tabs">
<li>abcd</li>
<li>xyzv</li>
<li>xyzv</li>
</ul>
<button>Click</button>

Try this.
function activetab(){
$(".nav-tabs li:nth-child(3) a").css("color", "red");
}

You can do like
$(".nav-tabs li a:nth-child(3) a").css("color", "red");

removing class attribute from li on click

I have the following code in html. I just want to remove active class when we click on other li and add active class to li on which it is clicked.
<ul class="pagination" id="paginationUL">
<li class="active">1</li>
<li onclick="javascript:selectThis()">2</li>
I tried to remove the class first and it is not working. Please suggest.
function selectThis() {
$('ul[class="pagination"] li[class="active"]').removeClass("active"));
}
Edited the script and it is working.

Your selectors are incorrect. You need to use the ID (#) or class (.) selector:
$('#paginationUL li.active').removeClass("active");
However, you're better off not using intrusive event handlers, and rather doing something along the lines of the following:
$('#paginationUL > li').on('click', function() {
$(this).addClass('active').siblings('.active').removeClass('active');
});
The latter example will apply a class of active to the clicked element and remove it from any other elements in the <ul>.

You can use something like this
$("#paginationUL li").click(function() {
$(this).toggleClass("active");
$(this).siblings().removeClass("active");
});

If you're using jquery this should do it:
$('#paginationUL li').click(function(){
$('#paginationUL li').removeClass("active");
$(this).addClass('active');
});

Your selector is incorrect. Use #paginationUL[class="pagination"] li[class="active"] or ul.pagination li.active or #paginationUL li.active

You can write a line to bind to all li elements in that menu. The $(this) selector acts against the element clicked on, while using .siblings() acts on all other child li elements.
$('#paginationUL > li').click(function(){
$(this).addClass('active').siblings().removeClass('active')
})
.active { background: orange; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="pagination" id="paginationUL">
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ul>

JQuery - How to add class to certain span if href equals something

I have a menu on a page. I want to add the class username to the my username span, that has an a href; that equals ?m=user_admin&p=edit_user&user_id=1.
Keep in mind that I want it to add this class, no matter what the username is! because the username will change all the time. How can I do it?
Example of the Menu
<div class="menu">
<ul>
<li><a class="user_menu_link_selected" href="#"><span>Dashboard</span></a></li>
<li><a class="user_menu_link" href="#"><span>Monitor</span></a><li>
<li><a class="user_menu_link" href="#"><span>Admin</span></a></li>
<li><a class="user_menu_link" href="#"><span>FTP</span></a></li>
<li><a class="user_menu_link" href="?m=user_admin&p=edit_user&user_id=1"><span>my username</span></a></li>
</ul>
</div>
I tried this JS code but it added the class to all the spans. I only want it added on the my username span because the href equals ?m=user_admin&p=edit_user&user_id=1.
$('ul a').each(
function(){
if($(this).attr('href')=="?m=user_admin&p=edit_user&user_id=1"){
$('.menu > ul > li > a > span').addClass("username");
}
});

$('ul a').each(
function(){
if($(this).attr('href')=="?m=user_admin&p=edit_user&user_id=1"){
$(this).find('span').addClass("username");
}
});

The following line should refer to this:
$('.menu > ul > li > a > span').addClass("username");
Probably
$(this).addClass("username");

use CSS here is the documentation it will select all the span whose parent a has the link
a[href='?m=user_admin&p=edit_user&user_id=1'] span {
color:Red
}
demo - http://jsfiddle.net/zq0fs7om/

Try this..
$('ul li a').each(
function(index){
if($(this).attr('href')=="?m=user_admin&p=edit_user&user_id=1"){
$(this).children('span').addClass("username");
}
});

You can check out the jsfiddle here:
http://jsfiddle.net/ow1478rd/
here's the gist of the code:
$('ul > li > a').each(function(){
if($(this).attr('href')=="?m=user_admin&p=edit_user&user_id=1"){
$(this).closest("li").find("span").addClass("username");
}
});
Basically the thing to note here is "closest" will basically search UP the DOM, and then "find" will search DOWN the DOM. so with your structure you're going up to the closest list element, and then finding the span inside of it to change the CSS. Hope this helps man.

Same JavaScript function for two different buttons(I/O button)

I have two which are created dynamically,
<div id="flipbutton1" class="flipButton">
<ul>
<li>OFF</li>
<li class="on">ON</li>
</ul>
</div>
also this
<div id="flipbutton2" class="flipButton">
<ul>
<li>OFF</li>
<li class="on">ON</li>
</ul>
</div>
Now i want to use this same JavaScript function but on different id.
Example is:
<script>
$(document).ready(function(){
$("#flipbutton1 ul li").click(function(){
$("#flipbutton1 ul li").removeClass("on");
$(this).addClass("on");
});
});
Problem:
It should work in such a way that when I click flipbutton1 it should work the same way but when i click flipbutton2 it should chanhge #flipbutton1 to #flipbutton2.
Any help would be appreciated.
Regards,

Do you want only one of the <li>s on?
$(".flipButton ul li").click(function () {
$(this).siblings().andSelf().toggleClass("on");
});

This will work
$(document).ready(function(){
$(".flipButton ul li").click(function(){
$(this).toggleClass("on")
});
});

Edited version:
$(document).ready(function(){
$(".flipbutton ul li").click(function(){
$(".flipbutton ul li.on").removeClass("on").addClass("off");
$(this).removeClass("off").addClass("on");
});
});
This ought to work even if you add more flipbuttons, as long as they use the .flipbutton class.

HTML tags won't accept my CSS classes when changed via JavaScript

I'm trying to change the classes of certain HTML elements when clicked on using JavaScript, but having some trouble.
Here's the JavaScript:
$(document).ready(function() {
$('#subnav li a').click(function(){
var $this = $(this);
$this.addClass('highlight').siblings('a').removeClass('highlight');
});
});
Here's the corresponding HTML:
<div id="subnav">
<ul id="subnav-ul">
<li>Click 1</li>
<li>Click 2</li>
<li>Click 3</li>
</ul>
</div>
The single CSS class is as follows:
.highlight {
border-left: 4px solid rgba(51,102,255,.6);
color: rgba(0,0,0,.8);
}

The anchors are not siblings, they are within LI elements that are siblings
$('#subnav li a').click(function(){
$(this).addClass('highlight')
.closest('li')
.siblings('li')
.find('a')
.removeClass('highlight');
});

$('#subnav li a').click(function(){
$(this).addClass('highlight');
$(this).parent().siblings('li').find('a').removeClass('highlight');
});
Try the above code.

The anchors are not siblings to one another. They are cousins.

It's not removing the highlight class because you have:
$this.addClass('highlight').siblings('a')
when it should be:
$this.parent().siblings('li').find('a')
Example
http://jsfiddle.net/DU7V8/1/

Try this code:
$(function() {
$('#subnav li a').click(function(){
$('#subnav li a.highlight').removeClass('highlight'); //remove class in all links
$(this).addClass('highlight'); //add class in current link
});
});
$(function(){}); is the shortcut to $(document).ready(function() {});
I hope this help.

lets dont forget about find('a') output is array
Try this:
$(document).ready(function() {
$('#subnav li a').click(function(){
$(this).addClass('highlight');
$(this).parent().siblings('li').find('a').each(function(){
$(this).removeClass('highlight');
});
});
});
See on jsFiddle