Having html list as ,
<ul id="slider">
<li class=""></li>
<li class=""></li>
<li class=""></li>
<li class="selected"></li>
<li class=""></li>
<li class=""></li>
<li class=""></li>
<ul>
I am adding selected class to any of the li element.
Here i have added class="selected" to fourth li element.
Want to execute some code when class selected is added to any of the li element.
tried this one , but not working as expected.
<script>
$(function() {
$('#slider').bind('DOMSubtreeModified', function(e) {
alert("Changed");
});
});
</script>
Just invoke a function after you add the Class on the click event.
$(function() {
function doSomething() {
.....
}
$('ul').on('click', 'li' function(e) {
$(this).addClass('selected');
doSomething();
});
});
The best way to handle this is just to call your function when you add the class, since it's your code adding it.
There are two common ways to do that:
You might do that with a direct call:
li.addClass("selected");
doSomethingBecauseItChanged(li);
Or you can do it by raising your own event on the li element that other code can listen to, which more thoroughly decouples the code adding the class from the code responding to the change.
Here's the code listening for the event:
$("#slider").on("added-class", function() {
alert("Changed");
});
And here's the code adding the class and raising the event:
li.addClass("selected").trigger("added-class");
Note that added-class is a name I made up, not something that already exists. Use whatever name you like, just make sure not to conflict with existing event types.
Here's a complete example: Live Copy | Live Source
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Event Example</title>
<style>
li.selected {
color: green;
}
</style>
</head>
<body>
<p>In two seconds, the third item will turn green and you'll see an alert.</p>
<ul id="slider">
<li class="">xxxxx</li>
<li class="">xxxxx</li>
<li class="">xxxxx</li>
<li class="">xxxxx</li>
<li class="">xxxxx</li>
<li class="">xxxxx</li>
<li class="">xxxxx</li>
</ul>
<script>
$("#slider").on("added-class", function() {
alert("Changed");
});
setTimeout(function() {
$("#slider li").eq(2).addClass("selected").trigger("added-class");
}, 2000);
</script>
</body>
</html>
Alternately, if you don't need IE support, you can use a mutation observer (support matrix), but frankly you really shouldn't need to use those if you control the code that's adding the class.
Register handler when you are adding the class.Something like this
$('li').addClass('selected').trigger('class-change');
$('#slider').bind('class-change', function() {
//do something
});
});
Related
I want to add class checked on li when users click it using jQuery. I have written the below code which works.
HTML
<ul>
<li class="row">Documents checked</li>
<li class="row">Documents Verified </li>
<li class="row">Forwarded to Logistics </li>
<li class="row">Received by Logistics</li>
</ul>
.checked {
background: green;
}
jQuery
$(function() {
$('li.row').on('click', function() {
$(this).addClass('checked');
});
});
This is working but I am told this is bad practice and asked to find better way to do this. I do the following but it is not working.
$(function() {
$('ul').on('click', function(li) {
$(li).addClass('checked');
});
});
$(function() {
$('ul').on('click', function(li) {
$(li).addClass('checked');
});
});
it's wrong because you cant select li by click on you ul
if you want to add class or delete class with click you can use (toggleClass) like this
$('li').find(.row).on('click', function() {
$(this).toggleClass('checked');
});
but if you want to just add class write like this
$('li').find(.row).on('click', function() {
$(this).addClass('checked');
});
use this Code for solution your problem
$(".row").click(function(){
$(this).toggleClass("change")
})
.change {
background-color:green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="row">Documents checked</li>
<li class="row">Documents Verified </li>
<li class="row">Forwarded to Logistics </li>
<li class="row">Received by Logistics</li>
</ul>
I am trying to add or remove active class for list element by clicking the link inside it.
<ul>
<li id="l1" class=""> one</li>
<li id="l2" class="">two</li>
</ul>
$('.btn1').click(function() {
$( "#l1" ).addClass( "active" );
$( "#l2" ).removeClass( "active" );
window.open ('/one');
});
$('.btn2').click(function() {
$( "#l2" ).addClass( "active" );
$( "#l1" ).removeClass( "active" );
window.open ('/two');
});
My html and css classes as above. But it doesn't work as expected. So anyone know how to resolve it?
$('.btn').click(function() {
$('.btn').closest('li').removeClass("active")
$(this).closest('li').addClass("active")
console.log($(this).data("url"))
})
li.active{color:red}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li id="l1" class=""> one</li>
<li id="l2" class="">two</li>
</ul>
My HTML and CSS classes as above
Basically, your code works well. You need to add CSS like .active{ color:red;}.
However, listen to the event click for each button is not a good thing to do. Imagine you have about 10/100/1000 button then you have to Copy/Pase code like this?
You should keep in mind that: Don't repeat yourself.
So as a result, I've refactored code for you like below. Cheers!
$('.btn').click(function() {
$('.btn').closest('li').removeClass("active");
$(this).closest('li').addClass("active");
var content = $(this).data('value');
$("#content").html(content);
});
.active{
color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li id="l1" class=""> one</li>
<li id="l2" class="">two</li>
</ul>
<div id="content" style="width:100px; height: 100px">
</div>
Edit
Basically, you should get content then assign it to div content below instead of navigating. If you still want to navigate, you should store your data by using localStorage
Try:
$(".btn1").click(function(){
$("ul li").removeClass('active');
$("#l1").toggleClass('active');
window.open ('/one');
});
Note line 2
// will remove class active from all bullets in all list add a #id to the selector to specify a specific list.
// One click handler for all buttons/links.
$('.btn').click(function(event) {
// Remove class from all buttons.
$('.btn').parent().removeClass('active');
// Get the specific button that was clicked.
var btn = $(this);
// Add active class to it's parent.
btn.parent().addClass('active');
//open from the data-link attribute on the link.
// though, window.open will probably be blocked by the browser popup blocker.
window.open(btn.attr('data-link'));
});
.active {
background-color: #ff0000;
}
a.btn {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<!-- you could save where to link to in a data attribute, though I am not sure why you wouldn't just have it in href -->
<li id="l1" class=""> one</li>
<li id="l2" class="">two</li>
</ul>
I found a lot of questions about this, but I have problem with getting the single id of a nested li element, and I couldn't find answer for it. Here is my code:
$(function() {
$('ul').on('contextmenu', 'li', function(e) {
e.preventDefault();
console.log(this.id);
});
And here is my HTML:
<ul id="u-main-ul">
<li id="1"> 1
<ul id="u-1">
<li id="11">11</li>
</ul>
</li>
</ul>
The problem is that when I right click on the li element with id="11", on the console it writes "1 11". When click one li element it shows and the id of all others li tags that are placed before the clicked one.
I want to get the id only of the right-clicked li tag and nothing else.
You need to stop the event from bubbling up the tree:
$('ul').on('contextmenu', 'li', function(e) {
e.preventDefault();
e.stopPropagation();
console.log(this.id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="u-main-ul">
<li id="1">1
<ul id="u-1">
<li id="11">11</li>
</ul>
</li>
</ul>
See the documentation for more info.
Try it with stopPropagation() like so
$(function() {
$('ul').on('contextmenu', 'li', function(e) {
e.stopPropagation();
console.log(this.id);
})
});
See the JSFiddle
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>
I'm trying to create a simple filtering systemt that would hide posts that do not have the same id as the li's under the navig class. To achieve this I am looping through all .article li's and checking what's their id.
Example:
click on li with id="health"
Article 2 disappears
Thank you!
HTML:
<ul class="navig">
<li id="health">Health</li>
<li id="ASD">ASD</li>
</ul>
<br>
<ul class="article">
<li id="health">Article 1</li> <br>
<li id="ASD">Article 2</li> <br>
<li id="health">Article 3</li>
</ul>
Javascript:
$('.navig li').onclick(function () {
$id = this.id;
$('.article li').each(function() {
if ($id != this.id) {
$('.article li').hide();
}
});
});
The fundamental problem is your HTML is invalid. You can't use the same id value on more than one element. Separately, you've used onclick where you would want to use click.
I'd probably use a data-article-id attribute on the navigation li instead, like this:
For example: Live copy (source)
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<meta charset="utf-8">
<title>Testing</title>
</head>
<body>
<ul class="navig">
<li data-article-id="health">Health</li>
<li data-article-id="ASD">ASD</li>
</ul>
<br>
<ul class="article">
<li id="health">Health Article</li>
<li id="ASD">ASD Article</li>
</ul>
<script>
$('.navig li').click(function () {
var articleId = $(this).attr("data-article-id");
alert(articleId);
var articles = $(".article li");
articles.not("#" + articleId).hide();
$("#" + articleId).show();
});
</script>
</body>
</html>
You'll want to do something to hide the articles (or show a default one) when the page loads, etc.; I'll leave that as an exercise for you. :-)
Side note: br elements cannot be children of ul elements, I've removed the ones from the articles list.
$('.navig li').onclick(function () { <-- not valid jquery
There is no onclick method in jQuery...there is .click(function(){}) or on("click", function(){})
second porblem, ids need to be singular. They can not be repeated. Use a data attribute [and br's can not be children of ul]
<ul class="navig">
<li id="health">Health</li>
<li id="ASD">ASD</li>
</ul>
<br>
<ul class="article">
<li data-id="health">Article 1</li>
<li data-id="ASD">Article 2</li>
<li data-id="health">Article 3</li>
</ul>
and script
$('.navig li').on("click", function() {
var id = this.id;
$(".article li").hide().filter('[data-id="' + id + '"]').show();
});
JSFiddle: http://jsfiddle.net/q8SCF/