I have a web page that has a few elements hidden on load here is the sections html layout
As you can see their is a button that on click i need to remove the hidden class on the next child here is the jquery code.
$(document).on('click', '#find-button', function (e) {
$('#find-data').children().first('.hidden').removeClass('hidden');
});
not sure what is happening but the code does not work
The logic isn't quite right.
first() returns the very first element in the collection so as written you would have the first child.
Use the .hidden selector on children() instead to filter only the ones with that class, and get first() of that reduced set
Change to
$('#find-data').children('.hidden').first().removeClass('hidden');
Related
I know the title sounds quite easy but the real problem is the markup. I have a link in a div which also in another div but the textarea and the paragraph are in another div so that's why I am having problem on how to show and hide elements in a completely different markuped div from a completely different markuped div.
I saw .parent() and .children() and .siblings(). But they couldn't help me or I think that I was not able to take help of those.
Here's the fiddle.
Here is the JS I tried:
$(".no_link").click(function(e) {
e.preventDefault();
});
$(".edit_offer").on('click', function() {
$(this).parent().parent().siblings().children("textarea").toggle();
});
You can use these selectors, but it will rely on the class username being in the heirarchy as you have in your code:
$(".edit_offer").on('click', function () {
$(this).closest('.username').find("textarea").toggle();
});
jsFiddle example
.closest() will traverse up the DOM until it hits the element with class username, then .find() will go down through the children looking for the textarea.
I did it using find(). http://jsfiddle.net/SZUT8/2/ To make the script more accurate and future-proof you could consider adding a class to the paragraph and matching it, as in here: http://jsfiddle.net/SZUT8/4/
You could always assign an ID (or a class, for multiple) to each of the desired elements ("p" and "textarea" in your case). Then use your ID/class to reference them for the show() or hide() methods, rather than navigating the DOM via parent(), sibling() and children().
Then your click handler will only need the line:
$('#idOfElement).toggle();
This is related to a question I've asked previously: Calling Javascript function after loading an AJAX page
Basically, before all the thumbnails were loaded dynamically into one container called #left_box. Using the script below, I can get it to highlight one div out of all the siblings.
$('.thumbnail_small').live('click', function(){
$(this)
.css('border-color','#000')
.siblings()
.css('border-color','#ccc');
});
However, in order to accommodate a new feature, I had to split the thumbnails into even more containers called .contain. Basically #left_box contains a series of .contain that hold x number of thumbnails. Now when I click on a thumbnail in one .contain, it only affects the siblings within that container rather than the larger container #left_box.
I tried
$('#left_box').on('click', '.thumbnail_small', function(){
$(this)
.css('border-color','#000')
.siblings()
.css('border-color','#ccc');
});
but it doesn't work. Any ideas? Thanks in advance.
I'd suggest repeating your seletor, using the not method to exclude the current element:
$('#left_box').on('click', '.thumbnail_small', function(){
$(this).css('border-color','#000');
$('#left_box .thumbnail_small').not(this).css('border-color','#ccc');
});
This will select all .thumbnail_small inside your #left_box, exclude the clicked one, then applying the css to the rest of them.
One div works fine, however when using multiple divs they all get expanded simultaneously.
Here 1x
http://jsfiddle.net/uPzXh/1/
Here 2x
http://jsfiddle.net/uPzXh/
How about:
jQuery(document).ready(function() {
jQuery(".lol").hide();
jQuery(".lollink").click(function() {
jQuery(this).prev().slideToggle(500);
jQuery(this,".new").hide();
});
});
BTW div in a is not allowed according to the spec.
In the second example you have a div with the same class name twice. So this line of code:
jQuery(".lol").slideToggle(500);
is doing what you tell it to do .. open all elements with a class name of lol.
Changing the class of the second div to lol2 would fix this.
I think you need to use $(this) inside the click function rather than $('.lol')
demo
I think what you are looking for is to expand one div when one link is clicked (not expand both, one after the other). If that's right, you can do something like this:
jQuery(".lollink").click(function() {
jQuery(this).hide().parent().find(".lol").slideToggle(500);
});
This hides the clicked element, gets the parent element, finds the descendant of that element with class .lol and toggles the slide on that.
See an updated fiddle here.
I have a form that I am trying to alter with jQuery. Basically, my form has two elements and I need to change the value of the first option in each of them. However, there is an "add more" option that uses AJAX to dynamically generate another element that also needs changed. This add more button can be clicked an unlimited amount of times.
Right now I have this:
$(document).ready(function(){
$("#myname-0-field option:first").val("None");
$("#myname-1-field option:first").val("None");
});
This works fine, but once the "add more" button is clicked, I have more elements called "#myname-2-field", "#myname-3-field", "#myname-4-field" etc. These obviously aren't affected by adding another line into my jQuery as the document has already loaded when they are added.
So the real question is, can someone point me in the right direction of writing a function that can react when the new element is added and change it. If possible, I'm also looking for the function to be aware and look for "#myname-X-field option:first" for tidyness.
use live() function
Then using each function set value
From the jQuery API look live function
Maybe you could add class to your element, so that finding particular element would be easier and it would not add event to other similar elements.
In the example I have a Li with class
$('li.myClass').live('click', function() {
$(this).val(); // this is the getter for clicked value
$(this).val("some_value_here"); // this is the setter for clicked value
});
Now you can add more elements (that has myClass class) and it will have a click event.
Btw. if you know that all elements are inside some container (div for example) then you can write more efficient jQuery using delegate.
$('#container_id').delegate('li.myClass', 'click', function () {
});
This is more efficient because it looks your new elements only under "containter" not from the whole DOM structure.
I am making changes to a jQuery validator, when there is an error it inserts a div to the parent element. I am trying to remove an the inserted div with by the specific class name from the parent.
$(element).parent().remove('.removeThis');
I thought the above code would work but it does not remove the the div.
.remove([selector]) will remove an element with the optional matching selector from the current list of elements in the jQuery object. It does not look through the children of the wrapped elements. Try either of these alternatives:
$(element).siblings('.removeThis').remove();
$(element).siblings().remove('.removeThis');
Try
$(element).parent().find('.removeThis').remove()