We Keep Coding

Trying to access a specific child div from a container div

I am having trouble with a little site I have been working on; I want a sort of "stream" container that holds "cards" of "content," where this "content" is some "text" as well as some "stats."
This is the HTML I currently have:
<div id="stream">
<div class="card">
<div class="content">content
<div class="text">
blahblahblah
</div>
<div class="stats">
blahblahblah
</div>
</div>
</div>
<div class="card">
<div class="content">content
<div class="text">
blahblahblah
</div>
<div class="stats">
blahblahblah
</div>
</div>
</div>
<div class="card">
<div class="content">content
<div class="text">
blahblahblah
</div>
<div class="stats">
blahblahblah
</div>
</div>
</div>
</div>
Eventually, I want users to be able to prepend "cards" to this "stream" as well.
Now, however, I am trying to implement some jQuery function to hide the "stats" of a card until it is clicked on. So after setting display to none in CSS of the stats, I made this in a javascript file:
$(document).ready(function(){
$("#stream, div.card").click(function() {
$(this).find($("div.stats")).show();
});
});
It sort of works; the stats of a card are hidden until I click on a card. When I click on a card, however, all the cards' stats divs are shown.
I was hoping to somehow make it that the specific card clicked is also the (only) one that gets shown. Obviously, the current way I am doing this opens all of them as jQuery I have selects all the cards at once; how can I remedy this?
Again, I apologize if this question has been asked; I could not seem to find something similar, and I really want this to work . . .
P.S. I tried to search for this particular instance; alot of suggestions were to just give divs ids, but this feels inconvenient when I eventually want users to prepend cards?

Your selector ->
"#stream, div.card"
was basically asking for all #stream and all div.card..
But what you really meant was, find all div.card inside #stream. and this would be, (aka without the ,).
"#stream div.card"
Also you jquery find doesn't require you to convert into a jquery object, so find("div.stats") will do the trick.

Display the same piece of javascript script in bootstrap columns that are col-sm6

I have a javascript script with a function called fuctionone() that displays a graph. I call this script below in a p tag so when 'HERE' is clicked the graph is displayed below each header.
<svg width="480" height="250">
<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-block">
<h3 class="card-title">Example one</h3>
<p> HERE </p>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-block">
<h3 class="card-title">Example two</h3>
<p> HERE </p>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
</div>
</svg>
However I want to display the same graph in each column but when I click the HERE link above only one graph is displayed under Example one when I want two graphs displayed for each.
One under Example one and one under Example two.
Is the <svg> tag messing this up somehow?

functionOne has no idea where it's being called from if I had to guess. Next time I'd recommend posting your javascript for clarity. Pass the element to your javascript function, then manipulate the DOM.
functionOne(this)

Generate unique div id in php to assign javascript to it

I generate the following pieces of code via php (unknown number in advance) and they are all wrapper in my 'item-container' div:
<div id="item-size" class="item-size">
<div class="view pic-transition">
<figure id="ribbonnew" class="ribbonnew">
<img class="ribbonnewimg" alt="" src="../images/endingsoonribbon.png">
</figure>
<img src="../images/woman.jpg" />
<div class="mask">
<h2>Title</h2>
<p>This is a test of a description for an item.</p>
Read More
</div>
</div>
</div>
I generate a ribbon on SOME of these 'item-size' div's and via javascript i want the ribbon to be hidden when the mouse is hovered over and back to normal when mouse out.
My javascript code is:
$("#item-size").hover(function(){
$('#ribbonnew').hide();
},function(){
$('#ribbonnew').show();
});
This of course only works for the first element, so I guess I need to assign ID's to the 'item-size' div's ? How do I do this AND create the javascript which binds the mouse hover to every of these divs (how to pass the size of how many I created, so I could add ID's from 0 to size)?
As an extra question, is there also a way to make the ribbon fade in and fade out slowly? .fadeOut(1000); is not delivering the expected result

Remove all ids :
<div class="item-size">
<div class="view pic-transition">
<figure class="ribbonnew">
<img class="ribbonnewimg" alt="" src="../images/endingsoonribbon.png">
</figure>
<img src="../images/woman.jpg" />
<div class="mask">
<h2>Title</h2>
<p>This is a test of a description for an item.</p>
Read More
</div>
</div>
</div>
And use a dot . in your selectors to match elements by classes :
$(".item-size").hover(function(){
$(this).find('.ribbonnew').hide();
},function(){
$(this).find('.ribbonnew').show();
});
For your extra question, you can use a parameter in the hide and show jquery methods for animation :
$(this).find('.ribbonnew').hide(400);
Edit : if the html is inserted dynamically, try event delagation instead :
$('#item-container').on('mouseenter mouseleave', '.item-size', function(){
$(this).find('.ribbonnew').toggle(400);
});

(if you really want to use ids)
Generate a unique id using the uniqid() function, and name all your item-size elements.
<?php
$unique_id = uniqid();
?>
<div id="<?=$unique_id?>item-size" class="item-size">
<div class="view pic-transition">
<figure class="ribbonnew">
<img class="ribbonnewimg" alt="" src="../images/endingsoonribbon.png">
</figure>
<img src="../images/woman.jpg" />
<div class="mask">
<h2>Title</h2>
<p>This is a test of a description for an item.</p>
Read More
</div>
</div>
</div>
Then, match all elements with that unique id as part of their ids.
$("*[id^='<?=$unique_id?>']").hover(function(){
$(this).find('figure.ribbonnew').hide();
},function(){
$(this).find('figure.ribbonnew').show();
});

Issues implementing simple 'toggle' / (show/hide) on div, on mouseclick, using JavaScript

So I'm trying to make a div class element toggle/ or show hide an set of id elements upon mouse click. So on click on the 'result_location id' I'm trying to display all the divs under result_menu class beneath it.
Am I going the right way about this? Hope you can help! Here's my HTML and JS code:
HTML:
<div id="result_location">
<h3>MainText Here</h3>
</div>
<div class="result_menu">
<div id="a_column">
<h4>text</h4>
</div>
<div id="b_column">
<h4>text</h4>
</div>
<div id="c_column">
<h4>text</h4>
</div>
<div id="d_column">
<h4>text</h4>
</div>
</div>
</div>
</div>
JS:
$(document).ready(function() {
$('#result_location').click(function() {
$('.result_menu').slideToggle("fast");
});
});

It appears to be working fine for me, I threw up a quick html page without a problem. Only thing I can think of is that you must load jquery before the JS that you mentioned. Other than that it should be working!

Which one is the better way for performance to set a hover event on a div?

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