I'm looking to find out which element was clicked when there are multiple elements on the same page with the same class.
The class which is clicked I then want to show but keep all the other classes hidden.
<div class="btn">
<div class="btn-content">
<p>1,2,3,4,5</p>
</div>
</div>
<div class="btn">
<div class="btn-content">
<p>1,2,3,4,5</p>
</div>
</div>
jQuery -
$(".btn").click(function(){
$(".btn-content").show();
});
use this to find the element in current context:
$(".btn").click(function(){
$(this).find(".btn-content").show();// or $(".btn-content",this).show()
});
Working Demo
Try this:
$(".btn").click(function(){
$(this).find(".btn-content").show();
});
DEMO
You can find the element with class .btn-content to show only has clicked.
Use find jQuery function for that
$(".btn").click(function(){
$(this).find(".btn-content").show();
});
Related
I have a really simple problem.
How can I find the first previous element of another element? I tried the code below without success.
HTML:
<div class = "A">HERE</div>
<div class="B">
<div class="C" style="width:50px;height:50px;background-color:#000000;"></div>
</div>
JS:
$('.C').click(function() {
alert($(this).closest('.A').html());
});
Fiddle: http://jsfiddle.net/Mcujp/4/
If you are trying to get the preceding sibling, use .prev().
If you are trying to get the sibling of the parent (like in your example) use .parent().prev().
Try this:
$('.C').click(function() {
alert($(this).parent().prev('.A').html());
});
$('.C').click(function() {
alert($(this).closest('.B').prev('.A').html());
});
if you want to target closest children of top parent you can do so as something define below.
lets assume you have an HTML like
<div class="top-parent">
<div class="parent">
<button class="add-button">Child of 1st Parent DIV</button>
</div>
<div class="parent">
<button class="add-button">Child of 2nd Parent DIV</button>
</div>
</div>
<script>
$(document).on('click','.add-button',function(){
$(this).parents('.parent').prev().closest('.parent').find('.add-button').text('im clicked by one of the button next to my parent')
$(this).parents('.parent').remove();
})
</script>
similarly if you want to target grandparent next parent containers children just change .prev() to .next()
hope i made it simple to define :)
I want to toggle visibility of certain div on click of button. My HTML looks like follow
<div id="button">
<button> button </button>
</div>
<div id="somedata" class="hidden">
<label> some data</label>
</div>
Corresponding JQuery code is
$("#button").click( function() {
$("#somedata").removeClass("hidden");
$("#somedata").fadeToggle("slide");
});
This works perfectly except for the first time you click the button.
When you click on the button first time, it just appears and dis-appears immediately.
I really need to make that div hidden by default.
Check this link for demo :
JSFiddle link
Thanks in advance,
Regards,
Ganesh
The hidden class in Bootstrap includes visibility: hidden which is what is causing the issue. Set the element to display: none only and it works:
#somedata {
display: none;
}
$("#button").click(function () {
$("#somedata").fadeToggle("slide");
});
Updated fiddle
To start as hidden : swap 2 lines
$("#somedata").removeClass("hidden");
$("#somedata").fadeToggle("slide");
To
$("#somedata").fadeToggle("slide");
$("#somedata").removeClass("hidden");
You can use the .toggle() function and it will get the job done.
<div id="button">
<button> button </button>
</div>
<div id="somedata">
<label> some data</label>
</div>
<script>
$("#button").click(function () {
$("#somedata").toggle(500); //animation in milliseconds
});
</script>
I have a structure, such as
<div class="entry">
<p class="entry-text"><div class="nonmatched-sentence">some text goes here...</div></p>
</div>
how do I show all the nonmatched-sentence elements if they were made invisible before?
I now use this:
$(this).('entry-text').children('.nonmatched-sentence').show();
But it's not working...
Thanks!
You could go with this approach: http://jsfiddle.net/oejm2wfu/
For example I have created an event on the button click:
$("#btn").click(function(){
$(".nonmatched-sentence").each(function(){
$(this).show();
});
});
but you could do that on any event you want. Hope that helps
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'm having trouble getting my jQuery to work correctly. I have this HTML structure:
<div class="hide"><!-- form --></div>
<div class="button-hide">Hide Form</div>
<div class="button-show">Show Form</div>
When the 'button-show' anchor is clicked, it should hide it's own div, show the above 'button-hide' div and toggle the above 'hide' div:
$(document).ready(function(){
$(".hide").hide();
$(".button-hide").hide();
$("div.button-show a").click(function(){
$(this).closest("div.hide").slideToggle();
$(this).closest("div.button-hide").show();
$(this).hide();
});
});
None of this works for me, am I mis-using the 'closest()' command here?
Just a bit different from the others...
$(".button-show a").click(function(){
$(this).parent().siblings(".button-hide").show();
...
});
You are matching closest on the link not the parent div. Should be .parent().closest()
Yup, closest traverses the ancestors like parents() does. The div above it is NOT an ancestor but a sibling(look at alex's answer). if you had a container div for those divs its better to just use that as a reference like this:
<div class="parent-container">
<div class="hide"><!-- form --></div>
<div class="button-hide">Hide Form</div>
<div class="button-show">Show Form</div>
</div>
then in your jquery
$(".button-show a").click(function(){
$(this).parents(".parent-container").find(".button-hide").show();
etc
})