I'm trying to change (better would be to add) a class name to multiple divs using an onmouseover function in another element. The two elements are not nested to each other so I can't (or at least don't) think I can use plain CSS to do so.
I'm simplifying the following code to make it easier to read. The actual html for the "items" is a little bit more nested. Hope this won't be an issue.
<ul id="buttons">
<li class="a">button a</li>
<li class="b">button b</li>
</ul>
<div id="items">
<div class="item-a"></div>
<div class="item-b"></div>
<div class="item-b"></div>
<div class="item-a"></div>
<div class="item-b"></div>
</div>
So basically what I want to do is when I hover the "li" elements with the mouse the corresponding class in div "items" gets a class added to itself (so class "a" in buttons would add a class 'hover' to all the "item-a" classes, and so on).
I'm fairly new to JavaScript/jQuery. So far I managed to get it done using Id instead of class, but since ID must be unique it's not what I need. The code was:
onmouseover="document.getElementById('item-a').className = 'hover';"
This worked. Only one div (the first with that ID) but it worked, so I tried to change it from Id to ClassName but it didn't work.
onmouseover="document.getElementsByClassName('item-a').className = 'hover';"
and also, if the above code would work, it would change the class, while I'd prefer to add it (and then remove it with a onmouseout function)
for reference, among the lot of searching i did i also tried this link
Trigger the css:hover event with js
trying to adapt it to my situation:
$(window).load(function() {
$('.a').hover(function(){
$('.item-a').addClass('hover');
});
}
with no results.
I'd suggest:
$('#buttons li').hover(function(){
$('.item-' + this.className).addClass('hover');
},
function(){
$('.item-' + this.className).removeClass('hover');
});
JS Fiddle demo.
References:
addClass().
hover().
removeClass().
Finagle your markup a little bit and you can do it with plain CSS:
<ul id="buttons">
<li class="a">button a</li>
<li class="b">button b</li>
<li class="items">
<div class="item-a"></div>
<div class="item-b"></div>
<div class="item-b"></div>
<div class="item-a"></div>
<div class="item-b"></div>
</li>
</ul>
.a:hover ~ li .item-a {
background: red;
}
.b:hover ~ li .item-b {
background: blue;
}
Demo
Related
I have a problem dealing with duplicate ID's. I'm also aware it's very bad practise to have elements with the same ID but in this case, I'll end up having to change a massive part of the application to change the ID's so they can be unique.
I am having a problem toggling classes on an element in jQuery. My structure is below:
<ul>
<li id="wl-7050"> <!-- This acts as a main data group holder for the below li elements -->
<span></span>
<div id="wlHeader-7050"></div>
<div id="wlBody-7050">
<ul>
<li id="wl-7050"> <!-- This is the single element version of the data group header as above -->
<div id="wlHeader-7050"></div>
</li>
<li id="wl-7051"></li>
<li id="wl-7052"></li>
<li id="wl-7053"></li>
</ul>
</div>
</li>
</ul>
What I'm needing is a function where if I click the first instance of ID wl-7050, the child elements receive a new class. Whereas, if I select the second (single) element with ID of wl-7050 then only that one element has the new classes added to it.
I've tried using jQuery along with it's :first & :eq(0) attributes but still no luck unfortunately.
I do have classes assigned to each li element and it's child elements but whenever I run $('#wl-7050:eq(0)'), it returns both and the parent wl-7050 element get's used also.
I am flexible with JavaScript and jQuery answers.
The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).
You can't have two wl-7050. Use classes. Then to work on "add new class on click" it's just hard code. If you need a help I can edit my answer. But is just coding. Html IDs is a concept
I've been there before: I've had to deal with applications that do weird things, where changing them to be "correct" causes more grief than just dealing with it and moving on. You know duplicate IDs are bad, I know duplicate IDs are bad; let's sort the problem. (Yes, they're bad. Yes, they shouldn't be there. Unfortunately, there they are.)
You can treat IDs just like any other attribute on an element: they're attributes, albeit special ones. Code like this will work to select all elements with the same ID: $('[id=wl-7050]').
Now, we need to bind a click event to them. We'll do the same thing as we always do:
var lis = $('[id=wl-7050]').click(function(e){
console.log(this);
});
Here's the trick, and it would happen even if these elements all had different IDs: when you're clicking in a child LI, that click event will bubble up to the parent. We'll need to shut off event propagation so we don't trigger our click event twice:
var lis = $('[id=wl-7050]').click(function(e){
e.stopPropagation();
console.log(this);
});
Now we're in business and can work to figure out which type of LI we're working with: top-level or child.
var lis = $('[id=wl-7050]').click(function(e){
e.stopPropagation();
if ($(this).children('li').length > 0) {
// Top-level LI
}
else {
// Child-level LI
}
});
That should get you where you need to be. Let's all agree to never speak of those duplicate IDs again.
If you can't change the IDs, you could try adding a different class name to both elements:
<ul>
<li id="wl-7050" class="wl-7050-main">
<span></span>
<div id="wlHeader-7050"></div>
<div id="wlBody-7050">
<ul>
<li id="wl-7050" class="wl-7050-single">
<div id="wlHeader-7050"></div>
</li>
<li id="wl-7051"></li>
<li id="wl-7052"></li>
<li id="wl-7053"></li>
</ul>
</div>
</li>
</ul>
Then you query with:
$("#wl-7050.wl-7050-main");
$("#wl-7050.wl-7050-single");
You don't need to add an id to each li that would make it overly complicated. Just use classes inside your items and call them this way:
$("#group li").on("click", function(){
alert($(this).data("id"));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li id="wl-7050"> <!-- This acts as a main data group holder for the below li elements -->
<span></span>
<div id="header"></div>
<div id="body">
<ul id="group">
<li data-id="1"> <!-- This is the single element version of the data group header as above -->
<div class="wlHeader"></div>
</li>
<li data-id="2"> <!-- This is the single element version of the data group header as above -->
<div class="wlHeader"></div>
</li>
<li data-id="3"> <!-- This is the single element version of the data group header as above -->
<div class="wlHeader"></div>
</li>
</ul>
</div>
</li>
</ul>
<div class="box">
<ul class="test">
<li>test1</li>
<a class="add">test2</a>
</ul>
</div>
Above my HTML content coming dynamic. I want to add li tag in my test2 anchor link in JQUERY.
Here I have tried-
$('.box .test li:first-child').after('<li>');
But this li tag creating in wrong place. But I want my output should be like this -
<div class="box">
<ul class="test">
<li>test1</li>
<li><a class="add">test2</a></li>
</ul>
</div>
The best and correct way would be to fix your source html! A a tag inside a ul element is not valid. So your first task should be to get a correct html output.
If not possible you could use a :not selector and wrap(). So every child element, which is not a li, will be wrapped with a li element. This keeps it dynamic ...
$('ul > *:not(li)').wrap('<li>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<ul class="test">
<li>test1</li>
test2
<strong>test3</strong>
</ul>
</div>
The problem is with your initial HTML, since an a element can't be a direct child of a ul element. Try to fix this in you initial rendering, and not later using javascript, simply for the reason that different browsers will act differently upon invalid HTML fragment (auto-fix it, drop it, you name it...).
Having said that, in general $('selector').wrap('<wrapperElement />') is the traditional jQuery's way of wrapping an existing element with a newly created one.
Below code will wrap li tag around a tag having class add.
$("a.add").wrap("<li>");
$(document).ready(function(){
$("a.add").wrap("<li>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<ul class="test">
<li>test1</li>
<a class="add">test2</a>
</ul>
</div>
you're actually looking to add an element as a parent of another one, use Jquery wrap function instead:
$(".add:eq(0)").wrap("li")
Firstly, I need to say that I'm pretty new to jQuery.
I have this situation: http://jsfiddle.net/dVf8m/
I've been wondering if there is a way to do the slideToggle simplier. Now I have two ids on menu elements (#trigger1 and #trigger2) and two ids on the hidden divs (#one and #two). This also results in double jQuery. Is it possible to avoid all the ids and make it simpler?
Another thing is that if I click on both menu elements (First and Second) both divs appear. I want only one of the hidden divs to be visible at one time? How can I force the first div to disappear when the other one is appearing?
Also, if I'd want to use fadeIn/fadeOut in this situation, how to do it when both of them use the .click event?
Change your code to something like below. Have a class for the div and add click listener to it. add any attribute to the div and give the id of the div to be toggled.
<div id="top">
<ul>
<li><span id="trigger1" class="toggler" data-item="item1">First</span></li>
<li><span id="trigger2" class="toggler" data-item="item2">Second</span></li>
<li>Third</li>
</ul>
</div>
<div class="hidden" id="item1">
<ul>
<li>Smthn</li>
<li>Smthn2</li>
<li>Smthn3</li>
</ul>
</div>
<div class="hidden" id="item2">
<ul>
<li>Apple</li>
<li>Orange</li>
<li>...</li>
</ul>
</div>
$(document).ready(function() {
$('.toggler').click(function(e) {
$("#"+$(this).attr("data-item")).slideToggle(500);
});
});
JSFIDDLE
Say I have the following unordered list
<ul class="foo">
<li>
<div class="bar">
</div>
<div class="baz">
</div>
</li>
<li>
<div class="bar">
</div>
<div class="baz">
</div>
</li>
</ul>
<div class="nav">
<a class="prev-link">Previous</a>
<a class="next-link">Next</a>
</div>
I pass the list to a carousel like so $(".foo").carouFredSel(//options) however i don't want the class bar to be affected by the carousel.
I've tried $('.bar').removeClass('foo') before calling the carousel, but it doesn't seem to work... it is still part of the carousel. How can i prevent that one div from inheriting the parent class or is there a different way I can prevent that div from being treated as part of the carousel i.e. (just left in place)?
You could try using the !important CSS rule on the .bar class properties you don't want to overwrite. But that's probably not the best use of the rule.
You could also try :not() with the Foo class selector.
This will remove the class foo from your whole ul, if that's what you're going for.
$('.bar').parents('.foo').removeClass('foo');
I have the following HTML:
<ul>
<li class="one">one</li>
<li class="two">two</li>
<li class="three">three</li>
</ul>
<div class="one">
Here's div one
</div>
<div class="two">
Here's div two
</div>
<div class="three">
Here's div three
</div>
<div class="one">
Here's another div one, just for kicks
</div>
Here's what I want to do: when you click on the li class="one", I want to add an "active" class to all divs with class="one". Then when you click on li class="two", it removes the "active" from the first div and puts it on div class="two". I've played around with a few different ways of doing this, but I'm having trouble coming up with an efficient way to do it for all lis and divs (there will eventually be 10 of them).
$('ul a').on('click',function(){
$('.active').removeClass('active');
$('div.'+$(this).text()).addClass('active');
});
Demo: http://jsfiddle.net/9RLa9/
Alternatively, if you want to use the parent class instead of the text of the link to trigger your changes:
$('ul li').on('click',function(){
$('.active').removeClass('active');
$('div.'+$(this).attr('class')).addClass('active');
});