I'm having difficulty appending a class - javascript

I originally couldn't think of a way to append an additional class to an li element which had a class that other li elements had. I wanted to only add a class to that specific li element that I clicked a select button on and the solution was "On the click of the button, you can use .closest() to find the ancestor li element". The solution was a jquery solution and it works fine but now I'm having an additional problem. First, here's what I originally posted and the solution I was given along with the fiddle and then I will explain what my new problem is and would appreciate the help. So my original post:
"Ok so my script allows me to input text in a textarea element and add it to a li element within an ordered list with the id "Glist". Not only is text added to each li I add to the ordered list, but the additional things below are added as well and they all just display additional images using CSS. One of the classes, "Selimg" displays a sprite image of a button that says "select". Now each li element I add to my ol has all of the elements below as well as the classes. So each li element will have a div with a "Selimg" class that displays an image of a button that says select for example. When I click this div with the class Selimg, a new class named "Selected" will be added to the div which will change the background color of the li to indicate that it has been selected. The problem is, I want to only add the "Selected" class to the div with the Selimg class that I've clicked, not all li elements with "Selimg" classes. How can I do that with an onclick event handler or any other way using js or jquery? Here's the html:
<ol id="GList">
<li class="MyList">
<p class="bulletp"></p>
<!--This Selimg class displays an image of a button that says select-->
<div class="Selimg"></div>
<!--When a user presses this select button, I want to append a class only to the specific li element the user has pressed the select button on. -->
<div class="edit1"></div>
<div class="Del"></div>
<div class="progress"></div>
<div class="ShowMore"></div>
<div class="CheckedGoal"></div>
<div class="PCompetePercent"></div>
<div class="ShowMoreBlock"></div>
<div class="goalTxt"></div>
</li>
</ol>
The solution I was given:
"On the click of the button, you can use .closest() to find the ancestor li element"
$('.Selimg').click( function() {
$(this).closest('li').addClass('someclasss')
//or $(this).parent().addClass('someclasss') since the li is the parent of the button
})
here's the fiddle demonstrating the solution: http://jsfiddle.net/arunpjohny/fSMDv/2/
And now for the new issue. For some reason, the jquery solution was not working on it's own. Somehow, the jquery code above only worked when I placed it into a js function like this:
<script>
function runSel() {
var $li = $('.Selimg').closest('li').addClass('liselected');
$li.siblings().removeClass('liselected');
}
</script>
I also have a function that's called whenever I want to add another item to the list.
//This is only the part of the code that creates the div that I style to look like and be used as a button that says select. There's more code that also creates the li element itself and a few additional things but all for design. Nothing important.
var Selimg = document.createElement('div');
Selimg.setAttribute("class", "Selimg");
Selimg.setAttribute("onclick", "runSel();");
entry.appendChild(Selimg);
What this does is, create the div with the class "Selimg" which will be an image of a select button added to my list item and then it's given the onclick attribute that calls the runSel() function above as you can see. It works. However it only works once. The fiddle example demonstrates what I'm looking for. So now, when I add an item to the list, and click the select button on it, the function "runSel" is called which adds a class called "liselected" and liselected just changes the background color because the rules for each property in the css, have "!important" so the background color overrides the current one. It works, but like I said it only works once. After I add another item, and press the Select button on that one (which is made from the styles from the Selimg class), the liselected class is removed from the other li element yet the second li element that I just clicked the select button on, only causes the liselected class to be removed from the first but it's not added after that to the second li item, the current one. So, when i add multiple li, they will contain things like text and a div styled to look like a button that says "select" and so when I click "select" on an li, I want then for that specific li to have the liselected class appended and when I select the "select" button on another li, I want the class liselected to be removed from the other li element it was on and added to that one.

The jQuery solution will work fine... the problem is you are dealing with dynamically created elements... so need to use event delegation
$(document).on('click', '.Selimg', function() {
$(this).closest('li').addClass('someclasss')
//or $(this).parent().addClass('someclasss') since the li is the parent of the button
})
Also from what I understand you have not added the script in a dom ready handler
Demo: Fiddle

Not sure why you have written a book for such a small issue. I mean, I got tired of reading what you wrote after the first 30 lines of not getting to the point of the question.
Use: $(this).parent('li').addClass("...") instead.
jsFiddle

Related

Changing :before sign when slidedown Bootstrap

I have navbar from bootstrap in sidebar and I want to change :before sign on click on element in my menu. But I have problem... It's looks like:
But I want to change "+" sign to "-" after click. It should looks like it:
This menu have 2depth. U can see it how it works on port.cruzzapps.com
It's my JS, but this code not working propely:
$(document).ready(function(){
$(".collapse li a").click(function(event){
$('.collapse li a').removeClass();
$(this).addClass('minus');
event.preventDefault();
});
});
Let's change your code to this:
$(document).ready(function(){
$("li a").click(function(event){
$(this).toggleClass('collapse');
$(this).toggleClass('minus');
event.preventDefault();
});
});
I'm using toggleClass so that way when you click it again, the original class is added back and the new class is removed. What this code does is when an anchor tag in a list is clicked, it loses it's collapse class and gains a minus class. When it is clicked again, it loses it's minus class and gains the collapse class. If you've set up your CSS properly this will give you the effect you want.
Note I also changed your selector inside the click handler to not select every .collapse li a as that was changing all of the elements rather than just the one you wanted.

How do I correctly addClass to an element using jquery?

I have a nav, each li item containing their own specific class. I want the nav li item to be "active" while the user is on the current page, by adding an "active" class to the current li item. But it's not working and Im not sure why. This could be a stupid mistake so please forgive me
Here's what I have:
$(function(){
$('a.intro-page').addClass('active');
});
Your current code is adding the active class the the <a> element. It sounds like you want to add it to the <li> tag that the link is in instead?
If that's the case, something like this would work:
$(function(){
$('a.intro-page').parent('li').addClass('active');
});

Nav Bar - Script explain

I know this is embarrassing... but can some one explain me what exactly this script do line by line.
$(document).delegate('.ui-navbar ul li > a', 'click', function () {
$(this).closest('.ui-navbar').find('a').removeClass('ui-navbar-btn-active');
$(this).addClass('ui-navbar-btn-active');
$('#' + $(this).attr('data-href')).show().siblings('.content_div').hide();
$(document).delegate('.ui-navbar ul li > a', 'click', function () {
When someone clicks anywhere on the page, check if the target was an anchor tag (<a>) directly below a <li> inside a <ul> inside an element with the class ui-navbar.
$(this).closest('.ui-navbar').find('a').removeClass('ui-navbar-btn-active');
$(this) is now the anchor tag - the script is going to find the closest element with the class ui-navbar in the DOM tree and remove the class ui-navbar-btn-active from all anchor tags beneath it in the DOM tree.
$(this).addClass('ui-navbar-btn-active');
Then it will add the class ui-navbar-btn-active to the anchor tag the user clicked on.
$('#' + $(this).attr('data-href')).show().siblings('.content_div').hide();
This assumes the anchor tag has an attribute called data-href which matches another element's ID. Example, the user just clicked on Google and the script wants to find <div id="google">whatever</div>. If it finds the element, it will show it (jQuery prefers setting the css to display:block for this) , then grab all the sibling elements in the DOM tree which have a class of content_div and hide them (display:none).
Essentially what is going on is the page has some nav links - whichever one you click on gets an active class, and all the other nav links lose theirs. Then it shows some content the user expects to see specific to that nav link, and hides any other content that may be visible from a previous click.

Adding class to each li automatically when pressing a button in a carousel

Using JCarousel(circular), i made one list of items, where i want to add a class dynamically for each li after clicking a button,that too the class should be added one li after another.
so,for each click, only one li should have that class,so that i can write css for that class.
is there any jquery or javascript way to do this ?
$('#button').click(function(){
$('li.liclass:not(.your_class)')[0].addClass('your_class');
});

JQuery: Making a tab active

Given this website: link text
How would one find an element and remove any class=selected and add it to the correct link?
That way when history, models, and the like links will look become selected when clicked upon.
The following code should do the trick in your case..
// when clicking a link inside the sub-navigation list
$('#sub-navigation a').click(function(){
// first remove the selected class from the active one
$('#sub-navigation li.selected').removeClass('selected');
// then find the parent li of the clicked element and add the selected class
$(this).parents('li').addClass('selected');
});
(it is tested on your example page and it works as expected..)
$("a").click(function(e) {
$("a.selected").removeClass("selected");
$(this).addClass("selected");
});

Categories

Resources