I want to hide the span closest to the button clicked and also hide the button.
The html goes like this
<!-- the div will be looped using php -->
<!-- this will only be a general idea of the code as the actual is very long and messy -->
<div>
<form><!-- This is like the head section -->
<div>
<div> <!-- some divs -->
<button class="btn"></button> <!-- where i want it to work -->
<div></div><!-- make this 5 times -->
<span>content to hide</span>
</div>
</div>
</form>
<div><!-- Comments to the head are here -->
<button class="btn"></button><!-- button where it works -->
<span>contains the comments</span>
</div>
</div>
Script
$('.btn').click(function(){
$(this).hide();
$(this).next("span").hide();
});
I've tried the following below:
1. $(this).next("span").hide();
2. $(this).closest("span").hide();
It only works if I call all the span elements.
EDIT: the span is quite far as there are other elements like 5-10 elements before we reach the span.
This is what you need: JSFiddle
$(this).nextAll("span").first().hide();
nextAll() will look at all the next siblings (rather than just the first next one), and then we only want the first span that is found... first() achieves that
also, closest() will not work as it is looking up the tree, not at siblings.
EDIT 2: this answer selects the first siblings span, not the first sibling span after the button. The answer above using $(this).nextAll('span').first().hide() is the best answer.
$('.btn').click(function(){
$(this).hide();
$(this).siblings("span").first().hide();
});
closest() looks up the DOM tree, find() looks down, and siblings() is what you're looking for.
Edit 1: added first() after siblings() to only select the first one
you can try this way:
$('.btn').click(function(){
var _that=$(this)
_that.hide();
_that.parent().find('*').eq(_that.index()+2).hide();
});
https://jsfiddle.net/3z5oyc4n/
+2 is for each element after your .btn (+1 = div, +2 = span)
Related
I have some div tags which has some text & elements in it & I want to remove those div's, They are looks like this
<div style="font-family:verdana;font-size:12px;">
Example
example
</div>
There are many div's like this & I want to remove them all with using jQuery or javascript
If the elements have nothing in common such as a class, you can remove it by using the :contains and remove() method.
$("div:contains('Example')").remove()
Full example shown below:
$("div:contains('Example')").remove()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div>
Example
</div>
<div>
Darren
</div>
If the elements do have something in common you could use the class selector.
$(".common-class").remove();
Based on Darren's answer, if you want to be extra sure (as :contains will match and delete any div containing the word example), you can make sure it's a div that has an anchor with that same example as children, then go back to the parent and remove it.
If this doesn't work, please paste a few more divs so we can see a common pattern and target it the safest way possible.
$(document).ready(function(){
$('#remove').click(function(e){
$("div:contains('Example')").children("a:contains('example')").parent("div:contains('Example')").remove()
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="font-family:verdana;font-size:12px;">Example example</div>
<div style="font-family:verdana;font-size:12px;">Don't remove example</div>
<div style="font-family:verdana;font-size:12px;">Example don't remove</div>
<button id="remove">
Remove undesired divs
</button>
Objective
Highlight (by adding a background-color to) the "row" <li> if a (nested) checkbox inside that row is clicked.
Background
In this feature I am working on the interface for a file management system. When a user clicks the checkbox they can then delete all the files checked. to give them visual feedback, i want all of their selected files to have a background color. This will be done by clicking a checkbox, then i want the <li> to be colored.
Current state
I found various helpful answers on stackoverflow but have a gap in knowledge and trying to fill that in. Most answers use the parent element. But that only helps me by coloring that specific parent that holds the checkbox.
Code
I have this demo on codepen
jQuery
$("#this-list :checkbox").on('click', function(){
$(this).parent().toggleClass("checked");
});
CSS
.checked {
background: red;
}
HTML
<div class="container">
<ul id="this-list">
<li>
<div class="row">
<div class="col-md-2">
<input type="checkbox" />
song.mp3
</div>
<div class="col-md-2">
2011
</div>
<div class="col-md-2">
1 gb
</div>
<div class="col-md-2">
2 min
</div>
</div>
</li>
<!-- More <li>s -->
</ul>
</div>
you could use closest to get the closest checkboxs li element:
$("#this-list :checkbox").on('click', function(){
$(this).closest('li').toggleClass("checked");
});
this method will bubble up the DOM starting from the checkbox until it finds a match for the given selector (li in this case).
Use .parents([selector])
For the li you want this
$(this).parents('li').toggleClass("checked");
Or if you only want the row highlighted
$(this).parents('.row').toggleClass("checked");
Or if you only want the cell highlighted
$(this).parents('.col-md-2').toggleClass("checked");
You are very close! You can use the .parents() method of jQuery and pass in the class .row. It would look like this:
$("#this-list :checkbox").on('click', function(){
$(this).parents(".row").toggleClass("checked");
});
EDIT:
As #showdev mentioned, if you want the li element, you can just do:
$(this).parents("li").toggleClass("checked");
Simply add another .parent() to add the checked class to the row (the parent of the parent):
$(this).parent().parent().toggleClass("checked");
See this CodePen fork.
As in this Codepen
$("#this-list :checkbox").on('click', function(){
$(this).closest("li").toggleClass("checked");
});
Alternatively, since the checkbox is contained inside a div which is inside the target li you can use: Codepen
$("#this-list :checkbox").on('click', function(){
$(this).parent().parent().toggleClass("checked");
});
Okay so I have a very limited amount of knowledge with this and I can not find my answer anywhere. What I am trying to do is create multiple buttons that toggle information. So when the first toggle is clicked div 1 is toggled, when i click the second toggle div two opens and preferably div 1 closes. My code is very basic I am very new to this. Right now no matter what values I input into the toggle area both divs close. Thank you and I hope this makes sense.
Here is my code:
<script>
$(document).ready(function(){
$("button").click(function(){
$("div.house").toggle();
});
});
</script>
<button>Toggle</button>
<div class="house">
<p>SAMPLE TEXT ETC...</p>
</div>
<button>Toggle</button>
<div class="tumble-by">
<p>SAMPLE TEXT ETC...</p>
</div>
You can select the next sibling:
$("button").click(function(){
$(this).next().toggle();
});
In the above code, JavaScript this keyword refers to the clicked element. $(this) creates a jQuery collection and .next() method selects the very next sibling of the collection's element.
I agree too, that first you need to hide all divs:
$("button").click(function () {
$('div').hide();
$(this).next().toggle();
});
<script>
$(document).ready(function () {
$(document).on("click", ".js-toggle__button", function (e) {
$(".js-toggle__text").hide();
$(this).next(".js-toggle__text").show();
});
});
</script>
<button class="toggle__button js-toggle__button">Toggle</button>
<div class="toggle__text js-toggle__text">
<p>SAMPLE TEXT 1 ETC...</p>
</div>
<button class="toggle__button js-toggle__button">Toggle</button>
<div class="toggle__text js-toggle__text">
<p>SAMPLE TEXT 2 ETC...</p>
</div>
It's better to use uniquely defined identifiers when you accessing elements from JS (and don't use them for CSS — use separate names).
Your HTML code some day can be changed dramatically and JS will work anyway because it depends on identifiers but not on structure or on tag names.
I'm tinkering a bit with jquery to show a hidden div when a link is clicked. This should be fairly simple, but there's a flaw to it in this case. I have the following markup:
<div class="first-row">
<div class="week">
<p>Uge 2</p>
<p>(08-01-11)</p>
</div>
<div class="destination">
<p>Les Menuires</p>
<p>(Frankrig)</p>
</div>
<div class="days">4</div>
<div class="transport">Bil</div>
<div class="lift-card">3 dage</div>
<div class="accommodation">
<p><a class="show-info" href="#">Hotel Christelles (halvpension)</a></p>
<p>4-pers. værelse m. bad/toilet</p>
</div>
<div class="order">
<p>2149,-</p>
<p class="old-price">2249,-</p>
</div>
<div class="hotel-info">
<!-- The div I want to display on click -->
</div>
</div>
When I click the "show-info" link I want the "hotel-info" div to display.
My backend devs don't want me to use ids (don't ask me why..) and the above markup is used over and over again to display data. Therefore I need to be able to access the "hotel-info" div in the "first-row" div where the link is clicked.
I've tried to do something like:
$(document).ready(function() {
$('.show-info').click(function() {
var parentElement = $(this).parent().parent();
var lastElementOfParent = parentElement.find(".show-hotel");
lastElementOfParent.show();
});
});
But without a result :-/ Is this possible at all?
Any help is greatly appreciated!
Thanks a lot in advance!
Try this:
$('.show-info').click(function() {
$(this).closest('.accommodation').siblings('.hotel-info').show();
});
Even better imo, as it would be independent from where the link is in a row, if every "row div" has the same class (I assume only the first one has class first-row), you can do:
$(this).closest('.row-class').find('.hotel-info').show();
Reference: .closest, .siblings
Explanation why your code does not work:
$(this).parent().parent();
gives you the div with class .accommodation and this one has no descendant with class .hotel-info.
It is not a good idea to use this kind of traversal for more than one level anyway. If the structure is changed a bit, your code will break. Always try to use methods that won't break on structure changes.
You're right in not using an ID element to find the DIV you want :)
Use closest and nextAll
Live demo here : http://jsfiddle.net/jomanlk/xTWzn/
$('.show-info').click(function(){
$(this).closest('.accommodation').nextAll('.hotel-info').toggle();
});
My plan is to have lots of boxes (an undefined amount). When show box is clicked under a box, it shows that particular box.
I have some unique divs in my html. The div is made unique by:
<div id="box-<%=box.id%>"></div>
In my application.js, I have
$('.show-box > a').click(function(){
$('#box').show();
});
I obviously need to have the box-id in the $('#box').show(); part but I'm unsure how to do that...
EDIT: adding more information
<div class="show-box">
Show
</div>
<div class="box" id="box-<%= box.id %>"></div>
The class is for styling.
Just to add, I know that the javascript link should link to an actual link. I'll fix that later.
You would use this inside the handler to refer to the specific .show-box > a that was clicked.
So it depends on what the relationship is between that and the box element you want to display.
When you say under, if that means that it is a sibling to the .show-box element, you can use .parent() to traverse up from the <a>, then use .prev() to traverse back to the box.
$('.show-box > a').click(function() {
// "this" refers to the <a> that was clicked.
$(this).parent().prev().show();
});
Ultimately, the correct solution depends on your actual HTML markup. If you provide that in your question, it would be helpful.
You could select by ID if you want, but it is often not necessary.
On easy way would be to name your box ids after you a ids, or write another attribute into the a. For example if your a tag's ID was "anchor1", assign the corresponding div an id of "box-anchor1". Then, reference it like this:
$('.show-box > a').click(function(){
$('#box' + this.attr('id')).show();
});
If the box and the link that shows it are logically related, you can skip the whole unique ID business by using the following:
HTML
<div class="container">
<div class="box">
<!-- stuff in the box -->
</div>
Show
</div>
jQuery
$("div.container a").click(function() {
$(this).prev().show(); // prev() will get the div.box element.
});
On the other hand, if they are not related structurally, you can use the fragment part of the URL to reference the box ID:
HTML
<div>
<div class="box" id="box-1">...</div>
<div class="box" id="box-2">...</div>
</div>
<div>
<a class="boxtoggler" href="#box-1">Show Box 1</a>
<a class="boxtoggler" href="#box-2">Show Box 2</a>
</div>
jQuery
$("a.boxtoggler").click(function() {
var boxId = $(this).attr("href");
$(boxId).show();
});
Note how we're abusing the fact that the fragment section of a URL is preceded by a # character to make it into a css ID ;)
Not sure I understood your question, but if you want to show the clicked box:
$('.show-box > a').click(function(){
$(this).parents('.show-box').show();
});