Hello I have the following code:
Javascript/jQuery:
$(document).ready(function() {
$(".clickMe").click(function() {
$(".textBox").toggle();
});
});
Html code printed with a for loop:
<a class="clickMe">Toggle my text</a>
<br />
<div class="textBox"> - This text will be toggled</div>
<a class="clickMe">Toggle my text</a>
<br />
<div class="textBox"> - This text will be toggled 2</div>
<a class="clickMe">Toggle my text</a>
<br />
<div class="textBox"> - This text will be toggled 3</div>
I would like to be able:
When the page loads I want the to be hidden and toggle on click.
Using the same ids for <a class="clickMe"> and <div class="textBox"> to be able to toggle or hide the correct/equivalent <div> element.
jsFiddle code:
http://jsfiddle.net/A7Sm4/3/
Thanks
Edit 1: Class instead of Id
Edit 2: Fixed jsfiddle link
id are supposed to be unique
you should use class to do this
[EDIT] updated the jsfiddle to fit Marko Dumic's solution: http://jsfiddle.net/SugvH/
Something like this should do the trick:
$(document).ready(function() {
var divs = [];
$(".textBox").each(function(index) {
divs[index] = this;
});
$(".clickMe").each(function(index) {
$(this).click(function() {
$(divs[index]).toggle();
});
});
});
ID must (as per spec) be unique on the page. You can easily rewrite this to use class attribute:
<a class="clickMe">Toggle my text</a>
<br />
<div class="textBox"> - This text will be toggled</div>
<a class="clickMe">Toggle my text</a>
<br />
<div class="textBox"> - This text will be toggled 2</div>
...
Initially, you need to either hide div.textBox when DOM becomes ready, or hide it using CSS.
Then you attach click handlers to a.clickMe:
$(function () {
$('a.clickMe').click(function () {
// find first of following DIV siblings
// with class "textBox" and toggle it
$(this).nextAll('div.textBox:first').toggle();
});
});
However, maybe you don't control the markup but desperately need this done, you can keep your markup as it is and still make it work due to the fact that jQuery uses Sizzle framework to query the DOM which can be forced around the limitation of document.getElementById() (which returns only one element).
E.g. suppose you used id instead of class, if you write $('#clickMe'), you'll get the jQuery collection of only one element (jQuery internally used .getElementById() to find the element), but if you write $('#clickMe'), you get the collection of all elements with the id set to "clickMe". This is because jQuery used document.getElementsByTagName('a') to find all anchors and then filtered-out the elements (by iterating and testing every element) whose attribute value is not "clickMe".
In that case (you used your original markup), this code will work:
$(function () {
$('a#clickMe').click(function () {
$(this).nextAll('div#textBox:first').toggle();
});
});
Again, don't do this unless you absolutely need to!
$(document).ready(function() {
$("a").click(function() {
$(this).parent().find("div").toggle();
});
});
Use something similar to this.
Try appending an index to each pair of a/div's ids (clickme1 and textbox1, etc). Then when an a is clicked, read the id, take the index off the end, and show/hide the textbox with the same index.
Related
I have an ArrayList named conversations_client, I want to be able to get the value of conversation[6] for each div.
Each one the the media div represent a conversation.
Here is a part of my code :
<c:forEach var="conversation" items="${conversations_client}" >
<div class="media">
<div class="media-left">
<input class="checkbox" type="checkbox" name="selected-conv">
</div>
<div class="media-body">
<h4 class="media-heading">${conversation[0]}</h4>
<span class="hidden">${conversation[6]}</span>
......
I had first tried to use this code :
<script type="text/javascript">
$('.media').click(function(){
var text = $(this).text();
alert(text);
});
</script>
But it would print not only conversation[6] but others as well since they're all inside the div with class media.
Then I tried this :
<script type="text/javascript">
$('.media').click(function(){
var text = $('.hidden').text();
alert(text);
});
</script>
But it would print the same id for all divs, which is the id of the first one.
How can I do that? and would it be better to wrap those media divs with tags to be able to use a specific action for each one of them? because I am displaying all conversations, then once the user will click on one them I'll have to recover its id to be able to display the messages of that specific conversation and it isn't advisable to write Java code inside of jsp.
Thank you :)
Use find from current element.
$('.media').click(function()
{
var text = $(this).find('#hidden').text();
alert(text);
});
UPDATE:
You are using loop to repeat the markup. It's not good to use ID hidden multiple times as per W3C standards. ID should be unique and should be used once in the page.
Use class instead of id for multiple usages. In this case class="hidden"
Better change <span id="hidden">${conversation[6]}</span> to <span class="hidden">${conversation[6]}</span>
Also change JS to find .hidden
$('.media').click(function()
{
var text = $(this).find('.hidden').text();
alert(text);
});
I have different types of tag which have "rel" property using jQuery or javascript.
<a rel="popup10">test</a>
<div>text2</div>
<p rel="popup20">text3</p>
<span rel="other">test4</span>
I want list of all element which have rel property with value like "popup", ignore number 10 or 20 whatever. i don't want span tag because it has rel property but value is not popup.
You need to use attributes selector. You can select all element as your requirement like this:
$('*[rel^="popup"]')
try like this:
$('*[rel^="popup"]').each(function(){
alert($(this).text());
//do what ever you want
})
demo
Use the following, example I want all the div have ID only, then
<div id='test1'>aaaa</div>
<div id='test2'>bbbb</div>
<div id='test3'>cccc</div>
<div>No ID!</div>
JQuery
$(document).ready(function () {
$("div[id]").each(function () {
alert(this.id);
});
});
Please see the JSFiddle
I can't seem to get my jQuery right to remove a div when I delete something
Code is:
<div class="amend_order" data-item_key="1367264719mz7">
<p>Home Made Ice Cream</p>
<p class="small_text">Pistachio</p>
<p>
<a class="edit_item ui-link" href="javascript:void(0);">Edit</a>
----
<a class="deleter ui-link" href="javascript:void(0);">Delete</a>
</p>
</div>
I have tried using
$(this).closest('div').remove();
unfortunately this does not work.
Basically there is a list of several divs and I just want them to disappear when clicked.
If your container divs are dynamically added, you need to use event delegation. Try this:
$("#container").on("click", ".amend_order .deleter", function () {
$(this).closest("div").remove();
});
DEMO: http://jsfiddle.net/m6jVP/
If they're added dynamically, then the event binding won't actually find any elements and therefore won't execute when they're clicked. This event handling runs for any elements inside of #container that match the selector .amend_order .deleter when they are clicked.
You can replace #container with a selector that matches a stable (static) element containing these divs you're targeting, using document if necessary.
HTML
<div class="amend_order" data-item_key="1367264719mz7">
<p>Home Made Ice Cream</p>
<p class="small_text">Pistachio</p>
<p>
<a class="edit_item ui-link" href="javascript:void(0);">Edit</a>
----
<a class="deleter ui-link" href="javascript:void(0);">Delete</a>
</p>
</div>
JS
$('.deleter').on('click', function(){
$(this).closest('div').remove();
})
Live sample http://jsfiddle.net/Ny346/
Try pointing to the div:
$('div.amend_order').click(function(){
$(this).remove();
});
or when clicking on the delete button:
$('a.deleter.ui-link').click(function(){
$(this).parent('div').remove();
});
Try this:
$('.deleter').on('click', function(){
$(this).parent().parent().remove;
})
Live Sample
I have some question about how to get some value from some element like div,etc using jquery and without write onclick event or etc on the div where I want to get that value.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="test" title="test1">test</div>
<div id="test2" title="test2">test2</div>
<script>
function getVal(attr,value){
$("#show").text("this "+attr+" have value ="+value);
}
$(document).ready(function(){
$("#test").click(function(){
getVal("#test",$("#test").attr("title"));
});
});
</script>
<div id="show"></div>
</body>
</html>
Usually to get some value from div that i click, I add an onclick event on div like
<div id='test' onclick="getVal(test)" ></div>
and it will return "test". And the code that I write above nearly what I want, but the problem that I have is if I have a many div, how can I get the value from each div that I click just using jquery click function and I don't need to write
$("#test").click(function(){
getVal("#test",$("#test").attr("title"));
});
$("#test2").click(function(){
getVal("#test2",$("#test2").attr("title"));
});//and so on
here the code that I use to achieve what I want, using onclick event that I put on div:
<script type="text/javascript">
function overlay(rel){
var value = rel;
$(document).ready(function(){
$(".img"+value).click(function(){
$(".overlay-bg"+value).fadeIn();
});
$(".close"+value).click(function(){
$(".overlay-bg"+value).fadeOut();
})
});
}
</script>
<div id="gallery">
<img src="http://localhost/wedding/source/gallery/thumb/thumb-a.jpg" class="img1" onclick="overlay(1)" title="photo1" alt="photo1"/>
</div>
<div id="overlay-bg" class="overlay-bg1">
<div id="overlay"><img src="http://localhost/wedding/source/gallery/a.jpg"/>
<span>photo1</span>
<span style="font-size:0.8em;"><p>photo a</p></span>
<div id="close" class="close1"></div>
</div>
</div>
<div id="gallery">
<img src="http://localhost/wedding/source/gallery/thumb/thumb-b.jpg" class="img2" onclick="overlay(2)" title="photo2" alt="photo2"/>
</div>
<div id="overlay-bg" class="overlay-bg2">
<div id="overlay"><img src="http://localhost/wedding/source/gallery/b.jpg"/>
<span>photo2</span>
<span style="font-size:0.8em;"><p>photo b</p></span>
<div id="close" class="close2"></div>
</div>
</div>
I'm really want to know how to resolve my problem.
Give the elements you want to attach the click event handler to the same class. Then use the class selector [docs] to select all of them:
$('.sharedClass').click(function() {
getVal(this.id, $(this).attr("title"));
});
jQuery will bind the event handler to each of the selected elements.
There are many ways to select elements [docs], selection by ID or class are just two of them. You might also find the jQuery tutorial useful to get a better idea of how jQuery works.
you can use the this keyword within the handler function, and it will point to the element that was clicked
Here's the correct way to do it.
Put a class name to your target div e.g.
<div id="test" class="clickable" title="test">test</div>
<div id="test2" class="clickable" title="test">test</div>
...
...
Then create a jQuery event with selected class
$('.clickable').click(function(){ ... });
<div id="test">harsh</div>
<script>
alert(document.getElementById('test').innerHTML);
</script>
If you want to call this function with the click of every div, use :
$("div").click(function(){
getVal($(this),$(this).attr("title"));
});
If you want to call the function for a set of divs, but not all, give those divs a class name as suggested by #Felix Kling.
Check out the jQuery Selectors to get a better idea.
Not sure what you're trying to achieve.
If you have multiple values how do you want to store them?
If you have an array that you wanted to populate you can use the each() function on a JQuery selector to traverse all elements selected.
Like so:
var values = new Array();
$(document).ready(function(){
$('#test1, #test2').each(function(){
values.push($(this).html());
});
});
You could also store the values in an associative way to make retrieval a bit easier if you didn't want to iterate through an array. For example you could use the value of the 'title' attribute as the key in the array.
Replace the values.push() line with this line of code:
values[$(this).attr('title')] = $(this).html();
I want to hide all blocks which only contain hidden DIVs (aside from a caption). All elements have to be selected via class names.
In detail, I want each "eventBlock" not to show up when all "groupBlocks" underneath are already hidden. The same with "Menu" which should not show up when all child eventBlocks are hidden.
Each "Menu" contains multiple eventBlocks,
each "eventBlock" contains 1 or more groupBlocks.
I am using classes and cannot use IDs because there are lots of groupBlocks, eventBlocks etc.
DIVs are hidden using JQuery's "hide()" function, if it's relevant.
My HTML basically looks like this:
<div class="Menu">
<strong><a name="one">Menu CAPTION</a></strong><br />
<div class="eventBlock event1">
<p class="underlined">eventBlock CAPTION</p>
<div class="groupBlock group2">
<strong>name</strong><br />
4pm - 6pm<br />
</div>
<div class="groupBlock group1">
<strong>name</strong><br />
5pm - 7pm<br />
</div>
</div>
</div>
This should work:
var blocks = jQuery(".groupBlock");
if( blocks.size() == blocks.not(":visible").size() )
{
blocks.parents(".eventBlock").hide();
}
You can do something similar to hide the menu if all groupBlocks are hidden.
Simplest way is by using a single jQuery selector:
$('.eventBlock:not(:has(.groupBlock:visible))').hide();
Personally, I find the not() function more readable, and I can use end() later:
$('.eventBlock').not(':has(.groupBlock:visible)').hide();
Now, you want to hide the Menus as well? It seems a Menu should be hidden if it has no visible eventBlocks, which means it has no visible groupBlocks. So, we can use the same condition as before:
$('.eventBlock, .Menu').not(':has(.groupBlock:visible)').hide();
$('eventBlock').each(function() {
if ($('.groupBlock:visible', this).length)
$(this).show();
else
$(this).hide();
});
could be implemented as plugin