Develop Reference

How do I get a jQuery function to work with specific elements when they have the same class names?

I have sections (divs) with text in it, but when the text is too long I made it so the text "fades" (with css) and displays a "show more" button, which shows the full text for that specific div when clicked. The problem is that it only works for the first div, and I believe it's because they all have the same class and id name. What's the best way to get around that? Here's my code:
HTML:
<div id="fade-container">
<div id="fade-content">
<p>
Long text goes here...
<div class="fade-anchor"><span class="btn-primary round-xl small btn-shadow">Show more</span></div>
</p>
</div>
</div>
Script:
<script>
$('.fade-anchor').click(function(e){
e.preventDefault();
$('#fade-content').css('max-height','none');
$('.fade-anchor').remove();
});
</script>
By the way, info is being fetched from the database in a php while loop.

When the user clicks on .fade-anchor you can use thisto get the element currently selected, you should also use classes instead of ids for multiple elements, like so:
$('.fade-anchor').click(function(e){
e.preventDefault();
$(this).parent('.fade-content').css('max-height','none');
$(this).hide(); // Maybe you should hide instead of removing, in case you want to add a toggle effect later on.
});
You can also check out this jsFiddle with the working version.
Hope it helps.

You can achieve it by e.currentTarget
$('.fade-anchor').click(function(e){
e.preventDefault();
$(e.currentTarget).css('max-height','none');
$('.fade-anchor').remove();});

prev() not returning div element

I'm probably being especially dense about this, but I can't get an element to return using prev(). My basic HTML structure is:
<div>
<table></table>
</div>
<input type="button">
Where when I press the button, I want to get the previous element (the div element). To achieve this my button has a function attached to it with
var nearestDiv = $(this).prev();
When I've checked the contents of nearestDiv in the console it appears to be some kind of JQuery object rather than a HTML div. I've tried popping .val() at the end of .prev() but this comes back empty. How can I get the div element?
Note that my button is generated on the fly and doesn't have anything which identifies it.

you need to use jquery get function, to get a native html object and not the jquery wrapper:
$("input").on("click",function(){
console.log("jquery wrapper:",$(this).prev());
console.log("native html div object:",$(this).prev().get(0));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<table></table>
</div>
<input type="button">

If your html structure is same as you provided in the question, it will definitely return the div element. Note that there is no val() method for div element, you need to either use .html() or .text() inorder to get the contents.
$("input[type='button']").click(function () {
var div = $(this).prev();
alert(div.html());
alert(div.text());
});
Fiddle

You need to give .text() or .html() for standard HTML Elements. So your code should be:
var nearestDiv = $(this).prev().html();
var nearestDiv = $(this).prev().text();

getElementById inside a div

I'm using a Javascript to change the text on a form submit button, this is the code I'm using:
<script type="text/javascript">
$(document).ready(function(){
document.getElementById("button").value="New Button Text";
});
</script>
The code work perfectly, but I need to change it so that it effects the id #button within a div with the id of #formwrap. So basically I need to .getElementById("button") contained within the div with a id of #formwrap

If you are already using jquery, why not just do
$('#formwrap #button').val('New Button Text');
?
It's simply CSS-like selector, similar to what you'd use in querySelectorAll().
It will match for example this button:
<div id="formwrap"><input type="button" id="button"></div>
But keep in mind that only one element can have the same ID.
Maybe you wanted class? Then you'd use .button instead of #button.

JQuery add click event to unknown div id

I'm loading a php page that shows multiple elements, depending of the users (so i can't know how many items will be show). Those elements looks like :
<div id='container_feed'>
<div id='feed_element' data-userid='4'>Random Dude</div>
<div id='feed_element' data-userid='5'>Random Dude 2</div>
</div>
I'd like to add a click() event on each div and load a page depending of their userid HTML5 tag with .load()
I tried child(), each(), and some other method whithout success...
How can i add this event ?
Thanks.

Why not just delegate all the clicks like so:
/* You could also use '>div' if you can't guarantee the class name */
$('#container_feed').on('click', '.feed-element' , function() {});
That way, you're only adding the one event initially, but all divs inside will be handled by the click event. No need to loop through each element, using .children or .each or even $('#container_feed .feed-element').
Delegation is your friend.

First, don't use multiple IDs of same name. Use a CSS-class.
Then access the userid in your click function like that:
Code Example:
$("div.feed_element").click(function(e) {
var clickedUserId = $(this).data('userid');
$('.userdata-container').load('ajax/userpage_' + clickedUserId +'.html');
});
Corresponding HTML:
<div id='container_feed'>
<div class='feed_element' data-userid='4'>Random Dude</div>
<div class='feed_element' data-userid='5'>Random Dude 2</div>
</div>
<div class='userdata-container'>
<!-- The Ajax Code is loaded into this container -->
</div>

you can't have the same id for different elements, that's the point for an id (it should be unique). Use a class instead or just all div children from the main div
$('#container_feed div').on('click',function(){
// do something, the the userid data, load the page somewhere, etc...
})
or use a class
html:
<div id='container_feed'>
<div class='feed_element' data-userid='4'>Random Dude</div>
<div class='feed_element' data-userid='5'>Random Dude 2</div>
</div>
js:
$('.feed_element').on('click',function(){
// do something, the the userid data, load the page somewhere, etc...
})
newer versions of jquery recomends "on('click',function(){})" instead of "click(function(){})", i guess "click" will be deprecated sometime in the future and "on" can also replace "live()"

Try like this..
$("div[id='feed_element']").click(function() {
// Your stuff
});
You should use class, As ID is always used for unique identification.

First i would not use the same feed_element id for all divs.
Try this
$('#container_feed').children().each(function(){
if($(this).attr('data-userid') == # you want){
$(this).click(function(){
//your stuff here
});
}
});

$(".feed_element").click(function(event) {
var userId = $(this).attr('data-userid');
//make your ajax call.
});

jquery toggling a div - how to do this with multiple ids?

I am new to Jquery. My setup is as follows:
I have a series of divs that need to be able to be toggled (display hidden and shown). Each div has an action that can be performed so a unique ID will be necessary to know from which div the event came from.
To toggle the div I have a button for each div (which is not located within the div to be toggled).
Right now without jquery, I use the button's onclick event to pass the ID of the corresponding div to be toggled. Using the unique ID I can do the following:
function toggleFlag(divId) {
var div = document.getElementById(divId);
div.style.display = (div.style.display=="block" ? "none" : "block");
}
divId is unique so I also know where the event comes from if action within the div is performed.
the anchor code looks something like this:
onclick="toggleFlag('id-111');"
where the '111' is the unique id
First off, is it even worth it to use jquery for this if the extent of my javascsript isn't much more complicated (aside from maybe simple ajax).
More importantly, how would this properly be done using jquery?
Update: I am very close to solving this. I managed to get it to work using one of the suggestions below requiring unique class names for each button. A couple of the methods suggest implementations where the class name is the same for all buttons (I want this in order to be able to statically assign styles to the button class), but I could not get these to work. Could somebody please elaborate on the solution? Thanks!

Let's say that you build your anchors to have an id that corresponds with the id of the DIV to toggle and further that they all have a common CSS class. For example,
Toggle
<div id="d_111">Some stuff.</div>
Now you could use jQuery to build the click handlers for all of these pretty easily.
$(function() {
$('a.toggleButton').click( function() {
var divId = $(this).attr('id').replace(/a_/,'d_');
$(divId).toggle();
});
});

You could do something like this:
HTML:
<button id="btnId1" class="divId1" value="Click me to toggle divId1"/>
<button id="btnId2" class="divId2" value="Click me to toggle divId2"/>
etc...
<div id="divId1">div 1</div>
<div id="divId2">div 2</div>
etc...
SCRIPT:
$(function() {
$("button").click(function() {
var divId = $(this).attr("class");
$("#" + divId).toggle();
});
});
This approach has the advantage of only defining the event once for all buttons. You could also use another strategy for storing the div id in the button information, like a non-standard attribute - which jquery can pick up as well, or make the div id a part of the button id like so:
<button id="btn_divId1" value="Click me to toggle divId1"/>
<div id="divId1">div 1</div>
and then extract the id of the div from the id of the button clicked (personally this is the approach I'd take)
Hope this helps
EDIT: To answer the first question, yes you would benefit from doing this with jQuery since it would shorten the amount of code that you are writing and it would allow you to move to unobtrusively assigning events to the buttons which is a good thing :)
EDIT 2: Using non-standard attributes:
HTML:
<button id="btnId1" divid="divId1" class="btnToggle" value="Click me to toggle divId1"/>
<button id="btnId2" divid="divId2" class="btnToggle" value="Click me to toggle divId2"/>
etc...
<div id="divId1">div 1</div>
<div id="divId2">div 2</div>
etc...
SCRIPT:
$(function() {
$("button").click(function() {
var divId = $(this).attr("divid");
$("#" + divId).toggle();
});
});