How can i know which class was selected via jQuery & JS - javascript

I have a list with links:
<li class="link-1">One</li>
<li class="link-2">Two</li>
<li class="link-3">Three</li>
..
user clicks on any link, then with jQuery I want to display the content of the link.. somthing like:
$(".link-??? a").click(function() {
alert($(".link-??? a").html());
})
something like this. I am not going to create X function (as the number of the links), so what can I do? I should replace the ??? in somtehing else..

You could do:
$('li[class^="link"] a').click(...
However this would only work if the li have only one class or if the link-X class is the first in the list.
Inside the handler you can use $(this) to refer to the a element:
alert($(this).text());
Much better would be to give the li elements a common class:
<li class="link">One</li>
<li class="link">Two</li>
<li class="link">Three</li>
$('.link a').click(... will be much more reliable.

Give each element the same class. Then in your javascript reference this within your function. Check out the link below to see a working example
http://jsfiddle.net/kprgr/2/
<li class="link">One</li>
<li class="link">Two</li>
<li class="link">Three</li>
$(".link").click(function() {
alert($(this).find("a").html());
});

Try..
$(".link-??? a").click(function() {
alert(this.innerHTML);
})
Inside the click event, this should refer to the element that was clicked.
You could also do..
alert($(this).html());
..but the first way is simpler, and faster.

Related

How do I target the "this" element of "this's" child?

Hi I am trying to target "this" child descendant of "this."
Below is a list that contains sublists.
What I am trying to accomplish is an understanding of how to select this child of this parent.
Basically when I click on Honda, the sublist expands and I want to console.log the text of each selected element when I click it. For simplification purposes I changed the code to a console.log.
So far what the code below returns is the text for everything within the li.
IE if I click Honda or If I click Accord, the console returns the values "Honda, Accord, and CRV."
How would I traverse "this" to get the text of the clicked child of "this". The "this" of "this".
IE if I select "Accord" using my code below it should return the text "Accord" alone.
Code:
<ul class="main-menu">
CARS
<ul>
<li class="has-subs">
Honda
<ul class="sub-menu">
<li>Accord</li>
<li>CRV</li>
</ul>
</li>
<li class="has-subs">
Ford
<ul class="sub-menu">
<li>Mustang</li>
<li>Explorer</li>
</ul>
</li>
</ul>
$('body').on('click', '.main-menu ul li', function (e) {
e.preventDefault();
$this = $(this);
console.log($this.text());
if ($(this).find("a").text() == "CRV") {
var subMenu = $this.siblings('.sub-menu');
console.log("'THIS' SELECTOR IS WORKING AS INTENDED!");
}
})
Update:
Thanks all for answering! I think it will help to explain further what I am trying to accomplish.
What I am ultimately am trying to get sorted out is that I have a master accordion list with a list of car manufacturers and each manufacturer has a submenu like shown above.
I want to click on a list item, say Honda, it expands only Honda's list and shows their makes ie Accord and CRV. Then when I click on either Accord or CRV, it goes to their respective webpages.
When I click on a Ford, Honda's list should collapse or be hidden and Ford's should expand.
Here's a solution that makes your code work with minimal changes, however note that this setup is problematic since it creates a new (duplicate) event listener on every click.
$('body').on('click', '.main-menu ul li', function (e) {
e.preventDefault();
$this = $(this);
console.log($this.text());
$this.on('click', 'li', function(e) {
if ($(this).find("a").text() == "CRV") {
var subMenu = $this.siblings('.sub-menu');
console.log("'THIS' SELECTOR IS WORKING AS INTENDED!");
}
})
})
As #freedomn-m pointed out, your selectors are probably too broad. I'm not exactly sure what you're ultimately trying to do with the line selecting the sub-menu, but here's an alternate solution that's cleaner:
$('.has-subs>a').click(function(e) {
e.preventDefault();
console.log($(this).parent().text());
});
$('.sub-menu>li>a').click(function(e) {
e.preventDefault();
console.log($(this).text());
});
jsbin: http://jsbin.com/lurutiwago/edit?html,js,console,output
Your current selector
.main-menu ul li
will find all ul/li, under .main-menu, so will match Honda and Accord/CRV.
If you want to only act on the top-level items (Honda), you can change your selector to be more specific:
.main-menu>ul>li
(assuming they're correctly inside .main-menu).
Or, if you only want the lower ones:
.main-menu>ul>li>ul>li
or, in your case, target the 'ul' directly
ul.has-subs>li
or
ul.sub-menu>li

How to specifically .remove a class that had an added class in jquery

I have a few buttons that remove aspects of a class list, each class list has the same name but have an added class to specify what category they are e.g.
<li class="alerts news"> </li>
<li class="alerts weather"> </li>
<li class="alerts sports"> </li>
What I'm try to do is when a specific button that removes, say the 'Alert news' and without removing the rest of the alerts, how can you explain to jquery that you want just that element with that added class to be .removed.
jquery -
$(document).ready(function () {
$(".button").click(function () {
if($(".toggle").hasClass("toggleOff")) {
$(".alerts").hasClass('News').remove();
}
});
});
The hasClass doesn't seem to work, can't seem to remove any specific alerts without removing them all. Any help would be appreciated.
hasClass() returns a boolean, it isn't used as a selector method
Change
$(".alerts").hasClass('News').remove();
To
$(".alerts.news").remove();
This will remove only the alerts class that also have the news class

Expand/Collapse List in HTML with JavaScript

Friends, I am working on JavaScript for collapse/Expand <UL> list.
here is my Code. I am wanted to work on it, in Nth Level, i can show Child, but its not hiding Children.
I hope you guys will help me..
Thanks in Advance...
This will do the trick:
event.stopPropagation();
Docs.
If you debug your code you'll see that the event is being called for each parent ul. Check this out:
$("#ExpList ul li:has(ul)").click(function(event) {
event.stopPropagation();
$(this).find('> ul')
.toggleClass("hiddenChild")
.toggleClass("displayChild");
});
And the HTML:
<div id='ExpList'>
<ul>
<li>Platform-1
<ul class='hiddenChild'>
<li>Child-1
<ul class='hiddenChild'>
<li>P-C-C-1</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Fiddle.
HTML considerations:
I don't know if you can use a div wrapping the whole list, but I think it would make more sense doing it;
You're using the id ExpList for all ul. This is not how we use an id. Instead, for selecting many elements use its own tag or a common class;
I removed the onClick = openChild() which were present in all ul. It was throwin an error in your fiddle.
JavaScript considerations:
You don't have to mix a selector with a find this way $("#ExpList").find('li:has(ul)'). You can just use it on the same selector, as I did $("#ExpList ul li:has(ul)");
You don't need to search for all ul children($(this).children('ul')) since you'll have just one, I used this instead, which looks for just one: $(this).find('> ul');
As said before, the event.stopPropagation() does the trick. You don't need to trigger click event on all parent ul.
In CSS, I just changed #ExpList to this #ExpList ul to work in the new structure. I hope it helps.

How can i change "this" class name with javascript?

I have a list of button with all latin-alphabet and i want to change the class name from "m_letter" to "m_letter active" for example so i can toggle them.
My javascript code is this
$(".m_letter").click(function(){
$(this).className = "m_letter active"; //This is an example i tried other codes that i found on net.
});
Html
<li class="m_letter">A</li>
<li class="m_letter">B</li>
<li class="m_letter">C</li>
...
<li class="m_letter">Z</li>
Use addClass
This will add the class on click:
$(".m_letter").click(function(){ $(this).addClass('active'); });
If you need to remove the active class from a different m_letter first, add this line.
$('.m_letter.active').removeClass('active')
Use .addClass()
$(this).addClass('m_letter active');
Since you're using jQuery, it's easy:
$(this).addClass('active');
inside your click handler.
Don't use:
$('.m_letter').addClass('active');
as that will set all of the items to active.
I think what you are looking for is this: http://jsfiddle.net/CKW25/1/
JS
$(".m_letter").click(function(){
$(".m_letter").removeClass("active");
$(this).addClass( "active" );
});

Remove class from element and add to next element

I have a list of links, one has the class active.
On my next button click id like to remove the class from the current element and add it to the next only I cant seem to get it to add?
Ive made a fiddle to hopefully explain my problem, any help would be great, thanks
http://jsfiddle.net/h6D4k/
$('.next').click(function(){
$('ul.pagination').find('a.active').removeClass('active');
$('ul.pagination').find('a.active').next('a').addClass('active');
return false;
});
One of the jQuery most usable conveniencies is that its methods are (usually) chainable - in other words, they return the very object they are called from. So you can simply write this:
$('ul.pagination').find('a.active').removeClass('active').closest('li')
.next('li').find('a').addClass('active');
... as it's <li> elements that should be 'nexted', not <a> ones. But in fact, you shouldn't probably discard 'active' altogether if it's the last element in question:
var $a = $('ul.pagination').find('a.active'),
$li = $a.closest('li'),
$nextLi = $li.next('li');
if ($nextLi.length) {
$a.removeClass('active');
$nextLi.find('a').addClass('active');
}
This is actually what you want based on your html structure in you fiddle. http://jsfiddle.net/h6D4k/1/
$('ul.pagination').find('a.active').removeClass('active').parent()
.next().find('a').addClass('active');
Because once you've done this...
$('ul.pagination').find('a.active').removeClass('active');
There is no more a.active - the active classname has been removed from that element. So repeating the same selector...
$('ul.pagination').find('a.active')//...
... will select nothing.
Chain it all together instead.
$('ul.pagination').find('a.active').removeClass('active').next('a').addClass('active');
You have a second problem. According to the jQuery API for next(), it will:
Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.
You're not trying to get the following sibling:
<ul class="pagination">
<li><a class="one active" href="#">X</a></li>
<li><a class="two" href="#">X</a></li>
<li><a class="three" href="#">X</a></li>
</ul>
Next
Prev
You're trying to get the next <a> in the whole document. That's more challenging - and I'm not sure how to do it.
I would write it this way, preventing the action from doing anything on the last li as well.
http://jsfiddle.net/h6D4k/6/
$('.next').click(function(e){
e.preventDefault();
if ($("ul.pagination a.active").parent().is(":last-child")) return;
$('ul.pagination a.active').removeClass('active').parent().next().find("a").addClass('active');
});
You have two errors in your code:
Once removed, the active class can't be found anymore
your a tags are nested in li tags so next() doesn't work as you expect
To simplify things, you could attach the active class to the li tags.
Live demo: http://jsfiddle.net/h6D4k/7/
Code:
$('.next').click(function(){
$('ul.pagination').find('li.active').removeClass('active')
.next().addClass('active');
return false;
});

Categories

Resources