I want to select a div using its class, but there are other divs with the same class and with the same buttons that trigger my function, so I only want to select the class where $(this) is in.
I tried .parent, .child, .contains, .find but I didn't figure it out...
$(".btt_class").click(function() {
// I know this is wrong, but to give an idea of what I need
$(".div_class").has(this).append("You cliked here");
});
<div class="div_class">
<input class="btt_class" type="button" value="Click me" />
</div>
<div class="div_class">
<input class="btt_class" type="button" value="Click me" />
</div>
If I understand your request correctly, your snippet does just what you described: selecting the div, the currently clicked button is in and appending some text to it:
Pleas check out https://jsfiddle.net/4qwy605p/
$(".btt_class").click(function() {
$(".div_class").has(this).append("You cliked here");
});
<div class="div_class">
<input class="btt_class" type="button" value="Click me" />
</div>
<div class="div_class">
<input class="btt_class" type="button" value="Click me" />
</div>
It works as requested in the fiddle.
Is it possible you just forgot to load jQuery in your snippet?
this should do the trick: (OOPS, edited to include finding the closest one.)
$(".btt_class").on("click",function(){
myDiv = $(this).parent().closest('div.div_class');
myDiv.append("You clicked here");
});
To capture the element of the button being clicked you can do this:
$(".btt_class").click(function() {
$this = $(this); // captures the input element
$div_class_elem = $this.parent(); // goes up one level/element to capture the div element
$div_class_elem.append("You clicked here"); // append this text to the end of the div element
});
Use .closest() to traverse up the DOM tree up to the specified selector. This should do the trick:
$(this).parent().closest('div').append("You clicked here!")
Related
I have five paragraphs on my front end as below:
<form id="form1" runat="server">
<div id="div">
<p>para1</p>
<p>para2</p>
<p>para3</p>
<p>para4</p>
<p>para5</p>
<asp:Button id="button" runat="server" Text="Click to hide para3!" />
</div>
</form>
In JS I wrote the following:
$("#button").click(function () {
$('#div').find('p').hide();
return false;
});
I know when I click on the button it hides all the p tags, so it would be great if any one can tell me how I would be able to hide the third paragraph only.
You can achieve this by using the eq() method to specify which element in a matched set you want to retrieve by its index. As the index is zero-based, to get the third element would be eq(2).
Also note that you should hook to the submit event of the form element, not the click event of the button. Firstly because it's much better practice and secondly because you're using ASP.Net web forms which means that the id attributes will be over-written on any runat="server" elements when the HTML is generated by the server (unless you specify a setting but that's not specifically relevant here).
Try this:
<form id="form1" runat="server">
<div id="div">
<p>para1</p>
<p>para2</p>
<p>para3</p>
<p>para4</p>
<p>para5</p>
<asp:Button id="button" runat="server" Text="Click to hide para3!" />
</div>
</form>
$("form").submit(function(e) {
e.preventDefault();
$('#div').find('p:eq(2)').hide();
});
Working example
jQuery's nth-child(n) selector selects all elements that are the nth child, regardless of type, of their parent.
So you can do it with this way:
$("#button").click(function () {
$('#div p:nth-child(3)').hide();
return false;
});
You can simply use jquery's .eq().
this method reduce the set of matched elements to the one at the specified index.
For more Jquery's.eq()
$("form").submit(function(e) {
e.preventDefault();
$('#div p').eq(2).hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form id="form1">
<div id="div">
<p>para1</p>
<p>para2</p>
<p>para3</p>
<p>para4</p>
<p>para5</p>
<button id="button">Click to hide para3</button>
</div>
</form>
Try this:
$("#button").click(function () {
$('#div').find('p:nth-child(3)').hide()
return false;
});
:nth-child(' + number + ') will give the child at 'Number' position.
Let's play. (wont not work on Safari or IE due to arrows though)
button.onclick = e => div.children[2].hidden = !div.children[2].hidden;
<form id="form1">
<div id="div">
<p>para1</p>
<p>para2</p>
<p>para3</p>
<p>para4</p>
<p>para5</p>
<button id="button">Click to hide para3</button>
</div>
</form>
I want to show the div class of .unhideme on a button press. This class is dynamically generated so there are multiple divs with the same class name. Using JQuery how do I show this block correctly?
<div id="negativeButtons">
<div class="unhideme" name="unhideme" style="display:none">
<h3>Comments</h3>
<textarea name="unhappymanager" id="unhappymanager"></textarea>
</div>
<input type="submit" class="excused" name="negativexcused" value="Excused">
<input type="button" class="unexcused" name="unexcused" value="Unexcused">
<input type="submit" class="commentpushDB" name="commentpushDB" style="display:none" value="Submit">
</div>
Here I have jquery which works for the other buttons but I can't seem to find a function that will show the div.
$(document).ready(function() {
$(".unexcused").click(function() {
$(this).closest(".unhideme").show();
$(this).closest(".unexcused").hide();
$(this).prev(".excused").hide();
$(this).next(".commentpushDB").show();
});
});
Instead you have to use .siblings() method:
$(".unexcused").click(function() {
$(this).siblings(".unhideme").show();
$(this).siblings(".unexcused").hide(); // <---- ?? why hide the buttons.
$(this).prev(".excused").hide();
$(this).next(".commentpushDB").show();
});
It's because the buttons and the div are siblings not parents.
I want click on the check box and hide the respective content.
Now in my code all the content with same class gets hidden when I click any one of the checkbox.
Since my front end tags are in apex I do not want to use id, attr, name,value. I want to use class and fix this issue, exactly in the way I have written in this fiddle.
Fiddle link for reference
$('input[type="checkbox"]').click(function() {
if ($(this).is(":checked")) {
$('.div1').hide();
} else {
$('.div1').show();
}
});
<h3 align="center"> This JavaScript shows how to hide divisions </h3>
<form>
<input type="checkbox">Exam1
<div class="div1">I am content1!
</div>
<br>
<input type="checkbox">Exam2
<div class="div1">I am content2!
</div>
<br>
<input type="checkbox">Exam3
<div class="div1">I am content3!
</div>
<br>
<input type="checkbox">Exam4
<div class="div1">I am content4!
</div>
<br>
</form>
https://jsfiddle.net/6ybp2tL6/
Is this possible??
Thanks in advance
Try this instead DEMO
$('input[type="checkbox"]').click(function() {
($(this).is(":checked")) ? $(this).next().hide() : $(this).next().show();
});
Try to hide all the divs with class div1 initially,
$(".div1").hide();
$('input[type="checkbox"]').click(function() {
$(this).next('.div1').toggle(!this.checked); //toggle(false) will hide the element
});
And toggle the visibility of the relevant div element with class div1 by using next() and toggle()
DEMO
I am trying to remove some elements using a link. The elements that I am trying to remove are in a link's parent div, but i cannot seem to remove them.
Here is the HTML:
<div class="QR-answer-holder">
<label class="QR-answer-label">Enter an answer:</label>
<input class="QR-answer-input textbox" type="text" name="answer" />
</div>
<a class="new-answer new-qr-answer-space" href="javascript:void(0)">New answer space</a> |
<a class="remove-answer remove-qr-answer-space" href="javascript:void(0)">Remove Answer Space</a>
Here is the JQuery:
$remove_qr_answer = $(".remove-qr-answer-space");
$remove_qr_answer.live("click", function() {
$(this).parent.$(".QR-answer-holder").$(".QR-answer-label").remove();
$(this).parent.$(".QR-answer-holder").$(".QR-answer-input").remove();
});
Is there anyway to make it so the remove button removes the label and input closest to the end of the div? (or does it do that automatically)?
You're accessing the .parent() node from that anchor .new-qr-answer-space.
Infact, you need to get the .sibling(), since the div.QR-answer-holder is not the parent node:
$remove_qr_answer = $(".remove-qr-answer-space");
$remove_qr_answer.live("click", function() {
$(this).siblings(".QR-answer-holder").find(".QR-answer-label:last, .QR-answer-input:last").remove();
});
try
$remove_qr_answer = $(".remove-qr-answer-space");
$remove_qr_answer.live("click", function() {
$(this).parent().find($(".QR-answer-holder").remove();
});
and it should remove the lable and input as those are inside the placeholder
see siblings:
$(this).siblings('.QR-answer-holder .QR-answer-label').remove();
this would remove the elements '.QR-answer-holder .QR-answer-label' from the same dom node as this.
Try using this
HTML:
<div class="QR-answer-holder">
<label class="QR-answer-label">Enter an answer:</label>
<input class="QR-answer-input textbox" type="text" name="answer" />
</div>
<a class="new-answer new-qr-answer-space" href="#">New answer space</a> |
<a class="remove-answer remove-qr-answer-space" href="#">Remove Answer Space</a>
JavaScript:
$remove_qr_answer = $(".remove-qr-answer-space");
$remove_qr_answer.live("click", function(e) {
e.preventDefault();
$(this).siblings(".QR-answer-holder").find(".QR-answer-label,.QR-answer-input").remove();
});
parent is a method, not a property. There is no $ method in the jQuery object, you use the find method to locate children:
$(this).parent().find(".QR-answer-holder .QR-answer-label").remove();
$(this).parent().find(".QR-answer-holder .QR-answer-input").remove();
Edit:
As you actually want to get the closest sibling before the link, you should use the prev method instead:
$(this).prev().find(".QR-answer-holder .QR-answer-label").remove();
$(this).prev().find(".QR-answer-holder .QR-answer-input").remove();
Or if you want to remove all elements in the div, simply:
$(this).prev().empty();
I have three input fields for collecting telephone numbers from users. I display one field and hide the other two. I have placed a link(Add home number) below it and when you user clicks on the link it shows the hidden input field. And I have placed one more link below it when clicked displays the last input field.
<input type="text" />
<a href="#" class="show" >Add Home Number</a>
<div style="display: none">
<input type="text" />
<a href="#" class="show" >Add Office Number</a>
</div>
<div style="display: none">
<input type="text" />
</div>
And the jquery looks like this..
<script>
$(function(){
$(".show").click(function () {
$(this).next("div").show("slow");
});
});
</script>
The first link works fine, But the second one does not work.
I appreciate all help.
Thanks.
you have to use the each function:
like this:
$(".show").each($(this).click(function () {
$(this).next("div").show("slow");
})
);
.next() only selects the next sibling element. You links have no subsequent siblings, because you close the parent element (the div) immediately after. You need to select the next sibling of the div:
<script>
$(function(){
$(".show").click(function () {
$(this).parent().next("div").show("slow");
});
});
</script>