This is the scenario. The black element has an ID and theoretically I want to select like this:
$("#someid .class2")...
I don't want to get the element inside the red element though. And yes, the classes are written correctly, the red element and black have the same class...
Also, there may be elements between any of these elements (like in nested - the green element inside the red one might be nested inside multiple other elements, so the red one is not necessarily the parent)
So basically ignore all class1 elements other than itself.
How can I get this?
Edit: I added 2 examples. The query, whatever it is, should work for both.
Example 1
<div id="someid" class="class1">
<div class="class1">
<div>
<span class="class2"></span> <---- NO
</div>
</div>
<div>
<span class="class2"></span> <-----YES
</div>
</div>
Example 2
<div id="someid" class="class1">
<div>
<div>
<div class="class1">
<div>
<span class="class2"></span> <---NO
</div>
</div>
<span class="class2"></span> <-------YES
</div>
</div>
<div class="class1">
<span class="class2"></span> <--------NO
</div>
<span class="class2"></span> <-----------YES
</div>
console.log(document.querySelectorAll("#test1 > .class2"))
<div id="test1" class="class1">
<div class="class1">
<div class="class2">test 3</div>
</div>
<div class="class2">test 1</div>
</div>
In this example im using vanilla javascript but with jQuery the css selector it would be the same.
Related
I'm having trouble getting an image to show up that has been written within in a body. The specific image being the <img src="Images/Attachments/Shining.gif">
Not too sure if the script needs to be altered or if I would have to put it inside its own class. When I tried to append, the image showed up in both emails instead of the one I wrote it in. I'm coding this using Twine, Sugarcube btw!
<div class="header">
<div class="hamburgerWrapper">
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
<div class="EmailsWrapper">
<div class="ExtendMsg">
<p>Extended Messages will be placed under here.</p>
</div>
</div>
<div class="Email">
<div class="ImgWrapper">
<img src="Images/Phone Icons/User.png>
</div>
<div class=" EmailTitle">
<p class="EmailTime">9:31 PM</p>
<h1>Sender</h1>
<h2>Subject Title</h2>
<p class="EmailPreview">Email content to be filled out here.</p>
</div>
</div>
<div class="Email">
<div class="ImgWrapper">
<img src="Images/Phone Icons/User2.png">
</div>
<div class="EmailTitle">
<p class="EmailTime">9:29 PM</p>
<h1>Sender2</h1>
<h2>Subject Title</h2>
<p class="EmailPreview">Here is a gif for your memeing pleasure. <img src="Images/Attachments/Shining.gif"></p>
</div>
</div>
<<done>>
<<script>>
$(".Email").on("click", function() {
$(this).addClass("active");
$(".Email").not(".active").addClass("deactive");
$(".ExtendMsg").addClass("active");
$(".ExtendMsg").html($('
<div />').html($(".EmailPreview", this).text()));
$(".headerLabel h1").text("MESSAGES");
});
$(".hamburgerWrapper").on("click", function() {
$(".Email.active").removeClass("active");
$(".Email.deactive").removeClass("deactive");
$(".ExtendMsg").removeClass("active");
$(".headerLabel h1").text("MESSAGES");
});
<</script>>
<</done>>
I'm not totally sure what you are trying to achieve.
But I'd guess that you want to show and image, when ever you click something above?
If that is so, the classes are not met to handled that kind of jobs in Javascript. You might do so, if you assign the image to a Class property background-image: url("heregoesyourimages.png") but there are better ways to handle that kind of behavior.
If you have to use JQuery, you can use simply the method: "Show" or "Hide" that will display in and out an element:
First assign an identifier to your element to toggle (class or id):
<div class="ImgWrapper">
<img class="User2Image" src="Images/Phone Icons/User2.png">
</div>
Then, use the method $(".User2Image").Hide(); to make the image appear or disappear (what this do actually is that adds the property Display:none, to the element (correct me if I'm wrong its been a while since I used JQuery) or $(".User2Image").Show(); to show again the image.
I'm creating a website and I'm having some trouble with javascript. I have this function:
function offerboxclick(obj) {
obj.classList.toggle("menuelementclicked");
}
and my html looks like this:
<div class="menuelement" onclick="offerboxclick(this)">
<div class="arrowbox">
<div class="stripe1"></div>
<div class="stripe2"></div>
</div>
<div class="menutext">Menu level 0</div>
<level>
<div class="menuelement" onclick="offerboxclick(this)">
<div class="arrowbox">
<div class="stripe1"></div>
<div class="stripe2"></div>
</div>
<div class="menutext">Menu level 1</div>
</div>
<div class="menuelement" onclick="offerboxclick(this)">
<div class="arrowbox">
<div class="stripe1"></div>
<div class="stripe2"></div>
</div>
<div class="menutext">Menu level 1</div>
</div>
</level>
</div>
<div class="menuelement" onclick="offerboxclick(this)">
<div class="arrowbox">
<div class="stripe1"></div>
<div class="stripe2"></div>
</div>
<div class="menutext">Menu level 0</div>
</div>
The css code I think isn't relevant, because the problem is probably with the js function. As you can see, I have a multi level menu, and it works just fine when I'm clicking on the level 0 element to show hidden level 1 elements. But when I click any of the level 1 elements, the js function does work properly on the object, because it toggles "menuelementclicked" class on it. The problem is that it also toggles this class in parent menu element, so at the same time it opens level 2 and closes whole menu. I don't really know what to do now. Any help would be appreciated!
P.S. I tried putting my code on jsfiddle to show you all of it but for some reason on it doesn't work there at all 0_o
I have a scenario somewhat like this,
<div>
<div class="check">
<p class="user-name">
<a href=url>name</a>
</p>
<i class="user-icon"></i>
<div class="activity">
<p class="status">Status</p>
<p class="stream">Stream</p>
</div>
</div>
<div class="check">
<p class="user-name">
<a href=url>name</a>
</p>
<i class="user-icon"></i>
<div class="activity">
<p class="status">Status</p>
<p class="stream">Stream</p>
</div>
</div>
</div>
and, I'm to .slideToggle() the div with classname activity of that particular div whenever user clicks upon any element inside div with classname check.
I've came up with this one,
$(document).ready(function(){
$(".check").click(function(){
$(".activity").slideToggle();
});
});
And, as it's seen, its should not work, as it acts upon all the divs with classname activity.
And I can't change the classnames into ids, as these are auto populated through another function, and easier for styling through css and maintenance.
I want it to act upon only that div on which user will click.
How can I do so?
Thanks :)
Just select it properly, and make sure you use .activity instead of .user-activity (which doesn't exist):
$(".activity", this).slideToggle();
or
$(this).find(".activity").slideToggle();
See it in action here:
$(document).ready(function(){
$(".check").click(function(){
$(".activity", this).slideToggle();
});
});
.check .activity {display: none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class="check">
<p class="user-name">
<a>name</a>
</p>
<i class="user-icon"></i>
<div class="activity">
<p class="status">Status</p>
<p class="stream">Stream</p>
</div>
</div>
<div class="check">
<p class="user-name">
<a>name</a>
</p>
<i class="user-icon"></i>
<div class="activity">
<p class="status">Status</p>
<p class="stream">Stream</p>
</div>
</div>
</div>
The event handler will be called in the context of the element upon which it was fired, so just use this to access it.
You can combine that with jQuery's find method to look for the associated descendant element.
You can use find selector to find activity element in currently clicked div:
$(".check").click(function(){
$(this).find('.activity').slideToggle();
});
You may also use this Demo:
$(document).ready(function(){
$(".check").click(function(){
$(this).children('.activity').slideToggle();
//OR you may also use $(this).find('.activity').slideToggle();
});
});
I am writing a script to show/hide a section within a div. I have 3 of these divs with hidden sections but was hoping to use one function to control all 3.
Here's what I have right now:
$('.rates, .hours, .otherinfo').click(function() {
$('.expand').toggle();
});
Here's the HTML:
<div class="rates">
<h2>Rates</h2>
<div class="expand">
<p>Text in here is hidden by default.</p>
</div>
</div>
<div class="hours">
<h2>Hours</h2>
<div class="expand">
<p>Text in here is hidden by default.</p>
</div>
</div>
<div class="otherinfo">
<h2>Other Info</h2>
<div class="expand">
<p>Text in here is hidden by default.</p>
</div>
</div>
And CSS:
.expand {
display:none;
}
Obviously, this shows the "expand" div for all 3 of the divs when you click on any of them. Is there a way to incorporate this into the selector. Something like this'.expand'?
Thanks!
$(this).find('.expand').toggle()
You should add a fiddle for better answer. But something like this should work.
$("#something").click(function(){$(this).children("section").toggle();});
Which one is the better way for performance to set a hover event on a div with class 'con'?
Is there any difference?
$('.con').hover(func(){});
$('.content0.content.%etc%.con').hover(func(){});
var con = $('.con'); con.hover(func(){});
<script>
$('.con').hover(func(){});
</script>
<div class="content0">
<div class="content">
<div class="fl grad">
<div class="fl bor_rad bor_gray adver1">
<div class="clear">
<div class="fl left_ot">
<div class="bor_orang h150">
<div class="w130 bgfff txc pab10 con">
More
</div>
<div class="w130 bgfff txc pab10 con">
More
</div>
<div class="w130 bgfff txc pab10 con">
More
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
There's no significant difference between the three ways you listed, provided the two different selectors you've given select the same elements.
Note that the element lookup is done once, when you do the $("selector here") part. It's not repeated when the hover occurs.
Side note: Probably 95% of what I've seen people do in hover event handlers can, on modern browsers (e.g., not IE7 and earlier), be better achieved with CSS using the :hover pseudoclass. The other 5% can't, and you haven't said what you're doing and it may well be in that 5%, but I thought I'd point it out... :-)
1. $('.con').hover(func(){});
2. $('.content0.content.%etc%.con').hover(func(){}); var con =
3. $('.con'); con.hover(func(){});
all three work but they take time
because every time jQuery search in all document(DOM) then come to your selector
so use context by this we tell in jQuery that search not in all document but search form this element like below..
in your html
<div class="content0">
<div class="content">
<div class="fl grad">
<div class="fl bor_rad bor_gray adver1">
<div class="clear">
<div class="fl left_ot">
<div class="bor_orang h150">
<div class="w130 bgfff txc pab10 con">
More
</div>
<div class="w130 bgfff txc pab10 con">
More
</div>
<div class="w130 bgfff txc pab10 con">
More
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
now if you write
$('.con').hover(func(){});
then it reach your selector by following way
first go to
document
|
body
|
content0(class)
|
content (class)
|....
...
then at last your selector '.con'
so it will take time
to get better result define context by this it know from where it search your selector like
$('.con','.content0').hover(func(){});
now it reach your selector by following way
first go to
content0(class)
....
...
then at last your selector '.con'
Context really helps when you have a much larger DOM that you are searching through. Searching for IDs is already very fast and context doesn't really help that much in that case. Where context can really make a difference is when you are selecting by tag name or class.
Try testing like this: http://jsbin.com/aciji4/4
you can really see the timing get better for context when you bump up number of items in the DOM like this: http://jsbin.com/aciji4/6
reference Performance of jQuery selector with context