I'm learning jquery and i have this little issue with selectors.
This is my DOM structure:
<li>
<header class="title">
<span>Text</span>
My trigger
</header>
<div id="work-1">
<div class="description">
<p>some shit about the work</p>
</div>
<div class="carousel">
<img/>
<img/>
<img/>
...
</div>
</div>
</li>
ok. Its a simple list with a lot of links with my works. every item has its description and some pictures that goes on a carousel.
when I click on the link, i want to create a variable in jquery that get the carousel. I write this but it doesnt work:
$('a').click(function(e){
var href = $(e.target).attr('href');
// this is to make my div#work toggle from display:none to block.
var carousel = $(href).find('.carousel');
// this is the wrong code. I cant reach the carousel from there.
});
Thanks for help!
This should work:
$('a').click(function(e){
var carousel = this.parents('li').find('.carousel');
});
Inside the click handler, "this" refers to the A-element which was clicked. Find the LI-element which is the parent of the A element which was clicked and then search for the carousel which is a child element of that LI element.
use this instead, carousel its a diferent element
$('.carousel')
You have to go back (with .parent()) twice or use .parents until it finds the li tag.
$('a').click(function(){
var href = $(this).attr('href'),
li = $(this).parents('li'),
carousel = li.find(href).find('.carousel');
console.log(carousel);
carousel.css('background-color', 'red');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<header class="title">
<span>Text</span>
My trigger
</header>
<div id="work-1">
<div class="description">
<p>some shit about the work</p>
</div>
<div class="carousel">
<img/>
<img/>
<img/>
</div>
</div>
</li>
</ul>
by the way, your script works for me as well:
https://jsfiddle.net/rozgwq8e/
but you could use $(this) instead of e.target.
Related
I have a four a tags that I would like to use filter (hide & show) my content.
What is the best approach given the HTML that I am working with? I have tried to achieve this myself but my jQuery is often repetitive and doesn't work.
Scenario
All four content sections are shown by default
Selecting an anchor tag will show the relevant content and hide the other 3
Selecting an anchor tag twice will show all content (step 1)
<div class="left mob-filter">
Performance
Music
Art
Food
</div>
<div class="m-performance"><p>Performance Content</p></div>
<div class="m-music"><p>Performance Content</p></div>
<div class="m-art"><p>Performance Content</p></div>
<div class="m-food" ><p>Performance Content</p></div>
With some modification on your html this is what you want;
$(function() {
$("a.filter").on("click", function(e) {
e.preventDefault();
var a = $(this);
$("div.content div").hide(); //hide all
$("div.content div." + a.data("filter")).show(); //show clicked
});
$("a.filter").on("dblclick", function(e) {
e.preventDefault();
$("div.content div").show(); //show all
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="left mob-filter">
Performance
Music
Art
Food
</div>
<div class="content">
<div class="m-performance">
<p>Performance Content</p>
</div>
<div class="m-music">
<p>Music Content</p>
</div>
<div class="m-art">
<p>Art Content</p>
</div>
<div class="m-food">
<p>Food Content</p>
</div>
</div>
Use ids on the a tag and with jQuery call the id.click(function(){
Do show/hide code here!
})
I have encountered a similar thing before and what i did was not using hrefs but instead 4 buttons. Each with an onclick behaviour and in that onclick you could target different div's with their id's like you have done above and do things like showing content or hiding it. But you could do similar with the a tags as well.
I have to find a class content on click.
Following my HTML code
<div class="row team">
<div class="col-md-3">
<a href="#bannerformmodal" data-toggle="modal" data-target="#bannerformmodal">
<img src="img/team/Martin-Duff.png" class="img-responsive" />
</a>
<div class="content">
<p>paragaraph </p>
<p>paragaraph paragaraph </p>
<div class="details">
<!-- content for details div -->
</div>
</div>
By clicking on an image I need to get the HTML for details div. How do I get it?
I tried
$('.team .img-responsive').on('click',function(){
var content= $(this).closest('div.content').html();
console.log(content);
})
But this gives me undefined. Need your help with this.
Thanks!
closest selects the closest matching parent element (if any). The target element is the next sibling of the clicked element's parent. For selecting the target element, you can use the parent and next methods:
var content = $(this).parent().next('div.content').html();
div.content is a sibling of the parent of the img-responsive. You can find the related element by going up to the closest row and then finding the nested element. Not using next() makes it slightly less reliant on the markup layout.
var content= $(this).closest('.row').find('div.content').html();
This is roughly my setup:
<div class="wrapper">
<div class="first">
<a class="button" href="">click</a>
</div>
<div class="second">
<div class="third">
Stuff
<div>
</div>
</div>
Ok, so what I want to is this: when you click the a tag, the .third div should animate.
What I have so far is this:
button.click ->
third.animate
left: '+=100%'
The problem is, I have multiple of these wrappers on one page. So when I click the button, every '.third' div on the page animates. How can I select the right one and only that one?
Thanks!
Try this:
$('a').click(function(){
var third = $(this).closest('.wrapper').find('.third');
//use third variable to animate
});
You can use closest or parents.
If you want only one div to animate, assign an id to the div and animate only that one by$("#third").animate("left", "100%");
I am new to web design. I am making my resume now. I have navigation div like this:
<div id="nav" class="grid_12">
<div id="Home" class="grid_3">
<div class="button">
Home
</div>
</div>
<div id="Life" class="grid_3">
<div class="button">
Life
</div>
<img src="img/someimg.jpg">
</div>
<div id="Portfolio" class="grid_3">
<div class="button">
Portfolio
</div>
</div>
<div id="Contact" class="grid_3">
<div class="button">
Home
</div>
</div>
</div>
Then I have a script for the navigation:
<script type="text/javascript>
$("#nav img").hide();
$(".button").focus(function() {
$(this).next("img").fadeIn("slow");
}).blur(function() {
$(this).next("img").fadeOut("slow");
});
</script>
I want it so when someone holds the mouse over the button the image will appear under it. It is properly hiding the image, but fadeIn not working. I have no idea why it is not working.
.focus is bound to the "focus" event (I linked to a description of what it is rather than the event standard). This is most common when you tab to or click on text inputs, but it can apply to other elements as well.
The mouseenter (also mouseover, but the former is not triggered repeatedly when child elements are also hovered) event occurs when a mouse enters an element. The opposite is mouseleave (mouseout). http://api.jquery.com/mouseenter/
try putting your script inside a ready event of the document :
<script type="text/javascript>
$(document).ready(function(){
$("#nav img").hide();
$(".button").focus(function() {
$(this).next("img").fadeIn("slow");
}).blur(function() {
$(this).next("img").fadeOut("slow");
});
});
</script>
I believe you're using the 960gs, and one thing I have noticed is this: your four grid_3 divs are nested within your grid_12. The 960gs includes two classes called .alpha and .omega to fix the nested margins when a grid is inside a parent grid. You need to put the .alpha class on the first child div - which in this case is your <div id="#home"> and the .omega class on the last child div which is your <div id="Contact">. This will fix the margins you will have on the internal nested four grid_3's.
So I have several containers with this markup on a page:
<div class="box w400">
<div class="box-header">
<span class="expand-collapse">expand/collapse</span>
<h3>Heading</h3>
</div>
<div class="box-content">
<p>Some content here...</p>
</div>
</div>
And I am trying to achieve that after clicking on the .expand-collapse span, the .box-content div will slide up or down (toggle).
Here is the jQuery I'm using, I am trying to achieve this with closest():
$(document).ready(function() {
$('.expand-collapse').click(function() {
$(this).closest('.box-content').slideToggle('slow');
});
});
But it is not working for some reason :(
Try this:
$(document).ready(function() {
$('.expand-collapse').click(function() {
$(this).parent().next('.box-content').slideToggle('slow');
});
});
That selects the next sibling of the parent div, it does not make use of closest.
closest() finds the closes parent element. In your case, the span doesn't have any parent elements with class .box-content. why not just do $('.box-content').slideToggle('slow'); ??
edit: i missed the part where you have several of these on a page. the parent().next should work.