I'm trying find a "tip" class in every "animate" class and then display their "animate" class with show() if there is a tip class found in it.
There seems to be something wrong with my code because it's not working at all.
My attempt:
if($('.animate').find('.tip').length === 1) {
$(this).show();
}
HTML
<div class="foobar">
<div class="animate">
<div class="tip">- This is a tip.</div>
</div>
<div class="animate">
<div>- This is not a tip.</div>
</div>
<div class="animate">
<div class="tip">- This is a tip.</div>
</div>
</div>
You need to consider each $('.animate') in turn;
$('.animate').each(function () {
if ($(this).find('.tip').length) {
$(this).show();
}
});
... although you could also use the has() selector to do this in one line;
$('.animate:has(.tip)').show();
However, I guess you'll also want to hide the elements which don't match the selector, so you can do that via (demo);
$('.animate').each(function () {
$(this).toggle(!!$(this).find('.tip').length);
});
... or (demo):
$('.animate').hide().filter(':has(.tip)').show();
I think that you are not getting the this issue right
$(".animate").each(function(){
if($(this).find(".tip").length===1){
$(this).show();
});
});
Related
I'm trying to get an if else statement that will allow me to run a function if the #selectedwhip div has the .active class. If it doesn't, I want it to run another function. I've just used the console to see if it will work but it only returns the else statement in the console.
The scenario is 3 images which act as links. By clicking the links they will add an active class to another div. By being active, an image will be inserted into the div. Clicking an image does add an active class to the div but it doesn't cause the if statement to log to the console.
Is there something that's preventing it from working?
jQuery
$(".carbutton").click(function(){
$("#selectedwhip").addClass("active");
});
$(function() {
if ($("#selectedwhip").hasClass("active")) {
console.log('active');
}
else {
console.log('unactive');
}
});
HTML
<div class="cars">
<h1>Title</h1>
<div class="section group trio-cars">
<div class="col span_1_of_3 carbutton" id="carbutton">
<a id="car1"><img src="img/frontleftbmw.jpg" width="100%"></a>
</div>
<div class="col span_1_of_3 carbutton" id="carbutton">
<a id="car2"><img src="http://placehold.it/350x150" width="100%"></a>
</div>
<div class="col span_1_of_3 carbutton" id="carbutton">
<a id="car3"><img src="http://placehold.it/350x150" width="100%"></a>
</div>
</div>
</div>
<div class="col span_1_of_3">
<div class="stats-image" id="selectedwhip">
</div>
</div>
you have to have a check function such as:
function check() {
if ($("#selectedwhip").hasClass("active")) {
console.log('active');
} else {
console.log('unactive');
}
}
$(function() {
$(".carbutton").click(function() {
$("#selectedwhip").addClass("active");
check();
});
});
Just noticed you have duplicate IDs carbutton and that makes it as a invalid markup creation. Every ID should have to be unique.
you have to be clear what do you want to do and when. because you're just executing a function immediately the page is ready
$(function() {
if ($("#selectedwhip").hasClass("active")) {
console.log('active');
}
else {
console.log('unactive');
}
});
the above code will check if selectedwhip it has active class in the first load of the page.
you have to attach this conditional to an event
i've two menus in mobile view of my website. If you click on the hamburger bar, they should slide down/up. This is basically no problem for me.
My HTML looks like this:
...
<div class="foo">
<div class="trigger menu1">
..
</div>
<div class="trigger menu2">
...
</div>
</div>
...
<nav id="main-navi">
...
</nav>
<ul id="info-navi>
...
</ul>
...
At the moment I solved it via jQuery with click-events for every single trigger. Like this...
...
$(".trigger.menu1").click(function() {
...
$("#main-navi").slideDown();
});
$(".trigger.menu2").click(function() {
...
$("#info-navi").slideDown();
...
});
...
This works fine, but I want to use it more easier and without so much code. Isn't it possible to get just an event for the .trigger and refer it just to the class to trigger the menu to slide down?
I tried it with something like, but it doesn't work:
if ($this.hasClass("menu1")) {
$("#main-navi").slideDown();
} else {
$("#info-navi").slideDown();
}
Is there a way to get this working?
Regards,
Markus
You already have solved your problem. Though there are other possible solutions to this, but this code works quite well for your purpose:
$(".trigger").on("click", function(e){
e.preventDefault();
if ($this.hasClass("menu1")) {
$("#main-navi").slideDown();
} else {
$("#info-navi").slideDown();
}
});//.trigger click
You can use HTML5 data-* attribute to achieve this:
$(function() {
$('.trigger').click(function(e) {
e.preventDefault();
$('#' + $(this).attr('data-target')).slideToggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="foo">
<div data-target="main-navi" class="trigger">
Menu Opener 1
</div>
<div data-target="info-navi" class="trigger">
Menu Opener 2
</div>
</div>
...
<nav id="main-navi">
Menu Slide 1
</nav>
<ul id="info-navi">
Menu Slide 2
</ul>
You are heading in the right direction, but you had a small syntax error in your code. Try this:
$('.trigger').on('click', function(){
var isMenu1 = $(this).hasClass('menu1');
if(isMenu1){
$("#main-navi").slideDown();
} else {
$("#info-navi").slideDown();
}
});
$this is incorrect, should have been $(this)
This might help you,
var clickedItem = $(".foo").find('div');
clickedItem.click(function(e){
e.prventDefault();
if($(this).hasClass('menu1')){
$("#main-navi").slideDown();
}else{
$("#info-navi").slideDown();
}
});
Why don't you use slideToggle() jquery function ?
You can find help here http://api.jquery.com/slidetoggle/ .
I have three similar sections. I want to select an element with a given class but only within the scope of the element I clicked.
My current code selects all the elements with the same class.
If I add an event handler on class mine, and some action needed to be done on target class, only for the inner2 within the scope of class one I clicked,
so how do i do it.
HTML:
<div class="one">
<div class="some">
<div class="mine"></div>
</div>
<div class="inner1">
</div>
<div class="inner2">
<div class="target"></div>
</div>
</div>
<div class="one">
<div class="some">
<div class="mine"></div>
</div>
<div class="inner1">
</div>
<div class="inner2">
<div class="target"></div>
</div>
</div>
Try this : you can make use of siblings() to get inner2 element and do your operation on it.
$(".mine" ).click(function() {
$(this).siblings('.inner2').slideToggle(function(){
if(temp==0){
$(this).closest(".proElement").addClass('darkBg');
temp=1;
}
else{
$(this).closest(".proElement").removeClass('darkBg');
temp=0;
}
});// end of slideToggle
}); //
use sibling
$(".mine" ).click(function() {
$(this).siblings('.inner2').slideToggle(function(){
if(temp==0){
$(this).closest(".proElement").addClass('darkBg');
temp=1;
}
else{
$(this).closest(".proElement").removeClass('darkBg');
temp=0;
}
});
});
demo
use below code . use find to search child element
$('.one').on('click',function(){
var inner2Obj = $(this).find('div.inner2');
inner2Obj.slideToggle(function(){
// your code
});
console.log(inner2Obj) // this will log inner2 object within clicked one DIV
});
You can also use .siblings() here:
$(".mine" ).click(function() {
$(this).siblings('.inner2').slideToggle(function(){
if(temp==0){
$(this).closest(".proElement").addClass('darkBg');
temp=1;
}
else{
$(this).closest(".proElement").removeClass('darkBg');
temp=0;
}
});// end of slideToggle
}); // end of click
I have the following HTML fragment.
<div class="diagram-frame">
<div class="diagram">
<span class="diagram-name">Drawing Objects</span>
<svg>...lots of child elements...</svg>
</div>
<div class="diagram-name">
<a class="idlink" title="Drawing Objects (data models)" href="...">NA - Drawing Objects</a>
</div>
</div>
Currently, I use this jQuery selector to detect what has been clicked on:
jClicked.add(jClicked.parents()).is('div.diagram-frame')
jClicked is jQuery object containing the clicked element.
But I need to exclude clicks on the diagram-name div. How can I add negation using the .not('div.diagram-name') function call?
Since .is() matches a css selector, why not use the css :not() pseudo, and do all in one command?
jClicked.add(jClicked.parents()).is('div.diagram-frame:not(.diagram-name)')
Like this?
jClicked.add(jClicked.parents())
.not(jClicked.$('div.diagram-name'))
.is('div.diagram-frame')
Note, Not certain about jClicked object ?
Try
$(function() {
var jClicked = [];
$(".diagram-frame").on("click", function(e) {
if (!$(e.target).parent().is("div.diagram-name")) {
jClicked.push(e.target);
console.log($(jClicked));
alert(jClicked.length);
}
});
});
$(function() {
var jClicked = [];
$(".diagram-frame").on("click", function(e) {
e.preventDefault();
if (!$(e.target).parent().is("div.diagram-name")) {
jClicked.push(e.target);
console.log($(jClicked));
alert(jClicked.length);
}
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="diagram-frame">
<div class="diagram">
<span class="diagram-name">Drawing Objects</span>
<svg>...lots of child elements...</svg>
</div>
<div class="diagram-name">
<a class="idlink" title="Drawing Objects (data models)" href="...">NA - Drawing Objects</a>
</div>
</div>
jsfiddle http://jsfiddle.net/guest271314/2myjbuhL/
I'm not sure the best way to word this, so hopefully this makes sense.
Currently, on my page, all my elements fadeIn on click. What I would like is for a few select elements in an id (#seqFade below) to fade in on their own when that parent fadeIn class is clicked.
I've figured out how to make both of these effects work on separate pages, but I can't figure out how to have them both occur on the same page / combine the two.
Here is more or less how my page is designed, and below is what I have so far for code.
HTML
<div id="content">
<div class="fadeIn">
<p>Hello</p>
</div>
<div class="fadeIn" id="seqFade">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<div class="fadeIn">
Bye.
</div>
</div>
SCRIPT
$(document).ready(function(){
//hides all fadeIns
$('.fadeIn').hide();
$(document).on('click',function() {
if('#seqFade') {
//sequential fadeIn function (works)
$('span').each(function(i) {
$(this).delay(i*300).fadeIn('slow');
});
}
//fadeIn on click (works)
$('.fadeIn:hidden:first').fadeIn('slow');
})
.click();
Thank you so much in advance.
JSfiddle of full page //
JSFiddle of both effects working
Try this, just add a class on hidden at the beginning for the spans
$(document).ready(function() {
var timeOuts = new Array();
var eT=200;
function myFadeIn(jqObj) {
jqObj.fadeIn('slow');
}
function clearAllTimeouts() {
for (key in timeOuts) {
clearTimeout(timeOuts[key]);
}
}
$(document).on('click',function() {
$('#seqFade span').hide().each(function(index) {
timeOuts[index] = setTimeout(myFadeIn, index*eT, $(this));
});
});
});
http://jsfiddle.net/h67vk02w/2/
HTML
<div id="content">
<div class="fadeIn">
<p>Hello</p>
</div>
<div class="fadeIn" id="seqFade">
<span>L</span>
<span>o</span>
<span>a</span>
<span>d</span>
<span>i</span>
<span>n</span>
<span>g</span>
<span>.</span>
<span>.</span>
<span>.</span>
</div>
<div class="fadeIn" id="bye">
Bye.
</div>
Javascript
$(function() {
$('.fadeIn').find('span').toggle();
$('#hello, #bye').toggle();
$(document).click(function() {
$('#hello').fadeIn('slow');
$('span').each(function(i) {
$(this).delay(i*300).fadeIn('slow', function() {
$(document).unbind('click')
.bind('click', () => $('#bye').delay(300).fadeIn('slow'));
});
});
});
});
JSFiddle: http://jsfiddle.net/6mLgu3om/3/
Or like that?
Use the classes for this (add some fade/noFade classes to elements). ID must be unique. And after that just check if the element has that class like this. Now you have basically unlimited options to do this. Just add more classes / check and do something.
$(".class_of_element").hasClass("your_class")