JQuery :: Perform A Function On All Elements Within A Class?
Jun 18, 2011
I'm sure this is much simpler than I have been making it seem in my head so I'm giving up and asking Basically I have a html document being dynamically created by php. In the markup I create some divs (the number of which changes between pages) all of which belong to the same class (class="div") and have id's of the same format (id="div_90001" or "div_88926773"). What I want to do is perform a function on eachelementin the class and extract the number in the id and then perform a function with the number (AJAX) and then return the results to the div (probably some extra markup)
I can handle all the AJAX parts, the extracting of the id number etc... I just can't make a function that will work on all elements in a class. I fear I am not making much sense, I'll try again cos I don't think I'd understand what's above. I have some divs that belong to a class, I want to perform the same function on each of the elements in the class. How is this done?
View 1 Replies
ADVERTISEMENT
May 31, 2011
I'm using jquery file upload - when each file has uploaded, the name of the file appears, and I've added a check button:
<td colspan="2"><span class="ui-icon ui-icon-check"></span></td>
What I'd like to do is make jplayer fire off a "ding" sound as soon as each file is up.
For example (just to test)
$('.ui-icon-check').live('click', function() {
$(this).css("background-color","yellow");
});
needs an action, like a click or a mouseover or something. For each file that arrives, and therefore adds another instance of ui-icon-check, I'd like to fire an event. A weekend of googling has really only turned up Live Query from 2007, which works perfectly with
$('.ui-icon-check').livequery(function(){
$(this).css("background-color","yellow");
});
[Code]....
So am I totally mis-understanding the point of live, or just mis-using it?
I'm doing it this way rather than mess with the uploader code as he's updating the code all the time, and the more I can stay away from code code the better I think.
View 4 Replies
View Related
Jul 10, 2011
Code:
function randOrd(){ return (Math.round(Math.random())-0.5); }
var cardArray = [
[1, "hundo", "dog"], [2, "kato", "cat"],
[code]...
How come the random function has no effect on the second array it was given to randomize?
View 4 Replies
View Related
Feb 4, 2010
I have this code below:
Code:
$('#admintable').load("/includes/ajax.php?type=gallery&action=order&var=" + $.tableDnD.serialize());
The problem is that throughout my php project it calls different classes and definitions based on what modules are loaded.Is it possible to get it to load a function that is predefined rather than executing a page that will require me to once again declare all my variables and classes so I can perform just a simple db search.
View 4 Replies
View Related
Sep 28, 2010
My problem is that it takes ages to perform the element.focus() function. This is not a function I have written myself but is part of the Javascript language itself. There are probably a lot of reasons why this might be slow but I cannot find the right one. Let me describe my problem. We have a product which was created around 2004 and has been developed on since. The HTML and Javascript used for the product was based on a prototype which we then converted into a server based solution (we use Servlets/JSP).
Due to the nature of the prototype (and also the graphical layout) the major page consists of one huge HTML page which a lot of hidden DIV tags. These DIV tags are then toggled visible/invisible to make it look like we have a kind of tab functionality. We also do not load all tabs when we load the mail page, instead each tab is loaded into a hidden iframe and then with Javascript we grab the resulting HTML content and paste it into the main page, making that one tab visible while hiding all other tabs.
In one of these tabs we also do some more magic. The layout is as follows; we have sets of three columns each and then a lot of rows. Each set of three columns contains one text field per column. The last text field contains a percentage value and when edited, we check if the value is lower then before the edit and if it is, then we split the column, creating another set of three columns.
When we load the page the first time, there exists only one set of columns with the last column having the value 100. There can however easily be 100 rows as well. For the larger pages we can have (at load time) three columns which makes it 900 text fields. I do not know if this is much or not.So, with the above info, to my problem. First off, when I try to move the marker and click on a given field (so that the marker starts blinking on the selected field) it takes maybe 2-3 second (although not always, seems to be more the first time). If I then tab to the next field it goes very fast (like one would expect).When I try to edit a value (by simply adding or removing values) it again takes a very long time (the first time).
When I then try to tab, it takes ages (this happens always, not only the first time).My Javascript then. I have two events, onchange and onkeydown. onkeydown checks if a variable is set to true or not. If it is set to true, the method does nothing. If set to false it does a bunch of tests and sets the variable to true. onkeydown is what I think causes my first lag but the code is not really that advanced (no loops or anything). onchange does the same checks plus all the magic (with the split etc). One of the last things it does is try to set focus on the next text field and this goes extremely slow all the time.
We use IE8. We (sadly) have a lot of IE specific stuff so the site doesn't even work in Firefox. I have used IE8 Developer Tools and used the Profiler which basically gives a list of Javascript calls and their execution times. My own functions take basically zero time, but there are A LOT of calls to functions that are not named, or anonymous, according to the Profiler.
How do I find what the anonymous function calls are?Why is it the focus() function that takes time, can it (or is it) still some of our own Javascript that makes that function go slow, even though it is part of the Javascript language?Can it be the amount of elements on the page (900 text fields)? Is that much?Can it be IE8? Are there known issues with this?
View 1 Replies
View Related
Jul 2, 2009
I am new to this discussion but hope you would post reply for my query and encourage me to keep in touch with this discussion. Well here is my problem. I have made an edit in place form in which we can add and remove the elements. I have used jquery.jeditable.mini.js and jquery.duplicate-remove.js plugins for edit in place and add and remove action. I have live() function to access the dynamically ganerated elements like this. $(".addressDiv span").live("mouseover", function(){
clickable function here...
[Code]...
View 1 Replies
View Related
Jun 29, 2011
i want to get all element id's with class name=TestDiv how i can do this? Quick response is needed sample code is below :
[Code]...
View 4 Replies
View Related
Feb 22, 2010
There is simple html like this:
<ul id="icons">
<li class="icon1 hoverNow"><img src="some/pic1.jpg"/></li>
<li class="icon2"><img src="some/pic2.jpg"/></li>
<li class="icon3"><img src="some/pic3.jpg"/></li>
<li class="icon4"><img src="some/pic4.jpg"/></li>
</ul>
where class 'hoverNow' means, that opacity of the image is 1.0, while others 0.5. This done with css.
i want to do, that when mouse hover the 'li' element, image, IF it's not in the li element, who's having class 'hoverNow', become with opacity 1.0, and on mouseover, again will have 0.5 opacity. For this, i write this simple code:
[Code]...
View 1 Replies
View Related
Jun 1, 2009
I have a form that has it's HTML inserted into the database (yeah yeahI know..not my idea..I'm new here and just finding this out).Anyway, each form field has an embedded class in the HTML.The form is dynamically generated. Can be anywhere from 5 to 10 to 20to 50 fields.How can I loop over each form field and add a new class to the field
View 8 Replies
View Related
Aug 26, 2009
I'm trying to do the following:
$(document).ready(function(){
img=$(".img");
imga=img.attr("href");
$("#imgbox").append("<img src='"+imga+"'/
View 2 Replies
View Related
Sep 10, 2010
I need to match an h3 with a p that has the same class. However, there are multiple elements and multiple classes, so I'm trying to store the class in a variable (x) and say "when I hover over the h3 with class x, get the p with class x and fade it in".
I can't seem to get it.
View 3 Replies
View Related
Jul 29, 2011
I've got some code like this:
$(".slide-1").hover(
function () { $('.caption-1').animate({ bottom:0 },200); },
function () { $('.caption-1').animate({ bottom:-35 },200); }
[code]....
I don't have to repeat this block over and over manually? I know I can get jQuery to repeat each code block and insert the number automatically.
View 2 Replies
View Related
Oct 13, 2009
I would like to use JQuery to iterate through a set of <div> elements that have the same class and scale each value according to a value selected from a dropdown box. For example,
<select id="factor">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
[Code].....
View 5 Replies
View Related
Oct 21, 2009
I have two functions show after the message. The first works fine. When a checkbox is clicked with the class availableProfile, its class is removed, selectedProfile added. It is then appended to anotehr list and destroyed in the original. However when i click the now moved checkbox it doesn't recognize it has the new class of selectedProfile.
$(".availableProfile").click(function(event) {
elementID = event.target.id;
elementGroup = elementID.split("__");
$(this).removeClass("availableProfile");
[Code]....
View 1 Replies
View Related
Aug 19, 2011
im experiencing a problem when using the :nth-child() selector.
I currently have a div that contains multiple divs. These divs have either the class 'labels' or 'labels-alt', I currently use the following code to change add/remove a class to one of these
function mOver1(n) {
$('.labels:nth-child('+n+')').toggleClass("labels-hover");
}
function mOut1(n) {
[Code]....
View 3 Replies
View Related
Jul 18, 2010
I have this loop for each div with a 'city' class inside of the div with a ID of 'cities' code...
I would like to select two elements in each of these div.city elements to act on them. How can I do that?
View 1 Replies
View Related
May 5, 2010
oving jQuery at the moment, and have sort of hit a hiccup with showing and hiding specific elements with the same class. My idea is, what if I wanted to add a little button to show and hide the contents of a specific comment on a forum post, or blog, whatever. This would be easily done with id's but I'd like to just apply a class to each one of them and allow them to hide their contents. Here is the javascript and html as an example of what I am talking about.
[Code]...
View 2 Replies
View Related
Mar 31, 2011
I have a few input button classes all with the same class. When a user clicks on the input button, then I disable the input button so the user does not click on it again. I want to make it so when the user goes back, all of the buttons of the same class are active again(including the one that the user just clicked on).
View 3 Replies
View Related
Mar 28, 2010
I'm using jquery to make it easy for AJAX calls.
So I create a class: function cMap(mapID){//vars and stuff}
I go and prototype a function: cMap.prototype.loadMap = function(){ //jquery AJAX call }
Now in the jquery $.ajax({...}); call, I use an anonymous function on the "success:" call: success: function(data){ this.member = data; }
My problem is that inside this anonymous function call I'm trying to call a class member of my cMap class to store the data in from the AJAX call, but it's out of scope. So the JS console in FF/Chrome throws errors about bad value/doesn't exist.
How can I access this class member from inside an anonymous function? Or at least what's a good way to go about doing all this?
View 2 Replies
View Related
Oct 27, 2011
how to animate 1 individual element in a group of elements that share a specific class.
For example, say I have 6 buttons in a row that share the class="button"
They are all styled the same in CSS with .button { etc....}
And what I want to do is animate them when hovering, but only the one I am hovering over at the moment. For example, I've tried this:
$(".button").hover(function() {
$(this).stop().animate({ marginBottom: "200px"}, 800);
},function() {
$(this).stop().animate({marginBottom: "100px" }, 800);
});
Problem is, obviously, this animates all 6 buttons. I could write individual functions for each element but that seems wasteful. I'm assuming there is a way to do this in a more efficient manner.
View 2 Replies
View Related
Mar 1, 2011
I am making a system whereby if an element has a class "editable", you can click it and a popup box appears with some options about that particular element. Fairly straightforward, I'm using [code]...
This works fine but I need to be able to have lots of different divs, all with class "editable", some of which are inside others with class "editable". Like this [code]...
However, clicking on the 'somethingelse' div, triggers the click correctly but also triggers it for the parent 'something' div, so I end up with the popup box appearing twice.
Does anyone know how to just catch a click event on the exact div (without using ids) without triggering the parent?
View 1 Replies
View Related
Oct 7, 2011
how jquery mobile generate attribute 'class' in the elements?
View 1 Replies
View Related
May 20, 2009
$('a[class*=myclass]') selects all a elements whose class attribute contains 'myclass', how do I do the opposite?
View 1 Replies
View Related
Sep 6, 2011
I've been fiddling around with a bit of javascript in a chrome extension - something to alter the Google buzz webpage.I'm trying to find each individual post basically and have the following:
var entry =$('.X0POSb'); //This main block contains the bulk of Google buzz content
console.log(entry);
var items = entry.find('.G3.G2');
[code]...
View 4 Replies
View Related
Nov 15, 2011
This is a hard one for me: I got some elements with the class "tiles". What I am looking for is a function, which adds a class "flip" to each element but with a delay between each call of addClass(".flip"), so that the elements change the way they look sequentially, not one after another, but with a delay. Has anyone an idea?
View 1 Replies
View Related
Feb 12, 2010
how I can accomplish wrappingrelevantparts of a script into a function then call that function within a success area on another page.
This is what I have so far: Script.js page - This page is longer but this is the relevant part that I would like to wrap:
$(".product img").draggable({
containment: 'document',
opacity: 0.6,
revert: 'invalid',
[code]....
View 3 Replies
View Related
