I want to target a table which is outside of the element I'd like to use as a 'trigger' and then give it an additional class.
<div>
<table class="table"></table>
</div>
<div></div>
<div class="trigger">
<!---content open--->
</div>
The class "trigger" only appears when that div is open, so when it's open and the class is added, I want to target the table directly above it, and ONLY that table. The problem is that the table class "table" appears more than once on the page and there is always a further div between the two elements. How would I select only that one table directly before?
Given your HTML structure, where the table you're trying to match is a child of a sibling node to trigger:
Get all the preceding siblings of trigger with prevAll(), search within them for a .table with find(), and keep the last one in the resulting match.
var preceding = $('.trigger').prevAll().find('.table').last();
$(preceding).addClass('match'); // for demo, so you can see what matched
.match {
color: #F00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<table class="table"><tr><td>Don't want this table</td></tr></table>
</div>
<div>
<table class="table"><tr><td>Do want this table</td></tr></table>
</div>
<div>This sibling doesn't have a table</div>
<div class="trigger">This is the trigger</div>
<div class="table">Don't want this div</div>
<div>
<table class="table"><tr><td>or this table</td></tr></table>
</div>
This is pretty fragile. If possible, consider using specific classnames or IDs instead of depending on document order.
If I understood you correctly, you want to add a class to your table, right? If this is the case, you could add an id to the only table you want to modify and then use addClass.
<script>
//perform condition checking
$("#myTableID").addClass("class_to_add");
</script>
...
<div>
<table id="myTableID"></table>
</div>
<div></div>
<div class="trigger">
<!---content open--->
</div>
Related
I'm looking for a way to select the first child element of multiple parent divs, of which the parent divs have the same class. This is my HTML:
<div class="wrapper">
<p>Select this paragraph</p>
</div>
<div class="wrapper">
<img src="https://picsum.photos/200/300" title="Select this image">
<p>Don't select this</p>
</div>
<div class="wrapper">
<p>Select this paragraph</p>
<p>Don't select this paragraph</p>
</div>
Please see my full CodePen Here.
I'm trying to select the first child element of each div with the class wrapper and apply the same class to all of these child elements. I was looking at something in the lines of this:
$('.wrapper').children(":first").addClass("noMargin");
The problem with this is that it only selects the child element of the first parent div, but it doesn't select the img and the first p of the third wrapper. I figured you need some kind of array for this and apply a class to all of them, but how can I achieve this (with preferably jQuery)?
You're close, what you need is to go through the elements that have the .wrapper class and append the noMargin class to their first children i.e
$('.wrapper').each(function() {
$(this).children(":first").addClass("noMargin");
});
you can use following sample it is working fine
$('.wrapper :nth-child(1)').addClass("noMargin");
or another syntax
$('.wrapper :first-child').addClass('noMargin');
I have 3 forms section on a web page. Each form section has a seperate id with input elements contained within. I have a div outside of those form elements that serves as header for each section. I've written a script that checks if the form section has an input element that are labelled by the class name '.form-input'. Problem is when no form-inputs are found My script hides all Titles with the ".title-section" class name. I need to hide only the "title-section" that belongs to the form element. It would be easier if this title were contained within the form but it's outside as a seperate div.
$(function () {
//If there is no form inputs hide title section
// .lenght is truthy = true or false
if (!$(".form-input").length) {
$(".title-section").hide();
}
});
See below html for structure
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="title-section">
<h3>Hide Me 1</h3>
</div>
<div id="form-section">
<div class="well">
<input class="form-input">
</div>
</div>
</div>
</div>
</div>
It is hiding all .title-section elements simply because $('.title-section') selects all elements matching that selector, regardless of whether there is a .form-input element that follows it. You therefore need some code that assesses whether or not there is a .form-input element following the .title-section element. Something like this would work:
var titlesToHide = $('.title-section').filter(function(){
return $(this).next().find('.form-input').length === 0;
});
titlesToHide.hide();
I'm using jQuery's .filter() method to select the desired elements. In the code I wrote, it looks at each .title-section element, and then checks to see if the element right after it—.next()—has an element inside it with the class name .form-input. If it doesn't—.length === 0—the filter function returns true, thus including that .title-section element in the final collection.
JS Fiddle: http://jsfiddle.net/hca1y15z/
I have a div which I would like to hide along with all of its children. I thought that a simple selector.hide() would do the trick but it's still there.
HTML
<div class="row well">
<div class="artistAlbumInfo well col-md-6 ">
<h3><span id="artist"></span> - <span id="track"></span></h3>
<img src="" id="art" class="albumArt">
</div>
<div class="col-md-6">
<h3 id="album"></h3>
<h4>Playstate <p id="playState"></p></h4>
<h4>Position <p id="position"></p></h4>
</div>
</div>
JQuery
$(document).ready(function() {
$('.row .well').hide();
});
http://jsfiddle.net/375c8v2a/1/
Any ideas?
You don't need a space between classes if you want to hide only those with both classes
$('.row.well').hide();
To do either or add a comma
$('.row, .well').hide();
What you have didn't work because .row .well means "an element with class well inside (as a child or deeper descendant) an element with class row. In CSS, the space is the descendant combinator.
To seelct the element that has both classes, remove the space:
$(document).ready(function() {
$('.row.well').hide();
// ----^
});
That means "an element with class row and class well".
$('.row').hide();
please remove second class
From what I've read on the comments the .well class was intentionally created to specify which .row class will be hiding since you have a lot of row classes. Then you can use it as the trigger to hide that row, instead of doing: $('.row.well').hide(); you can just simply specify the targeted class by doing:
$('.well').hide();
Click here to see a example on jsFiddle
I have the next code dynamically created using JQuery. Theere are multiple row class divs placed one under the other.
<div class="row">
....
</div>
<div class="row">
<div class="line_type"></div>
<div class="download_value"></div>
<div class="flag"></div>
<div class="email"></div>
<div class="prize"></div>
</div>
<div class="row">
....
</div>
After i create these divs I have a "pointer" to a specific div which is of class row. In JQuery, how do i make it so I go down the DOM tree, until i reach the div of class line_type and download_value and remove them both, and also I'd like to go one more node down, at the div of type email and change some of it's CSS attributes.
I was not able to find anything on the web, maybe it's cause i'm a noob at these still.
I have a "pointer" to a specific div which is of class row ->
Assuming that you have the this object of the corresponding div with class row.. then you can use .find to get the line_type and download_value inside that div.
$(this).find('.line_type').remove();
$(this).find('.download_value').remove();
Then you can use the same .find to get the div with class email and access the .css
$(this).find('.email').css(/* You code*/);
Assuming row_pointer points to the row in question:
$('.line_type, .download_value', row_pointer).remove();
$('.email', row_pointer).css(...);
check this out
$('div.row').bind('click', function() {
$this = $(this);
$('div.line_type, div.download_value', $this).remove();
$('div.email', $this).css('background-color', 'red');
});
http://jsfiddle.net/YvyE3/
So when I run the following code, I click on a div, and another div slides out.
<div class="section" id="1">Hi</div>
<div class="under" id="1">Hola</div>
<div class="section" id="2">Foo bar</div>
<div class="under" id="2">Derp</div>
</td></table>
</td></table>
<script>
$(".section").click(function(){
var id = this.id;
$(".under").slideToggle("slow");
});
But, when I click on the div with the class "section", it shows ALL of the divs with the class "under." What I want to do is show the div "under" with an id that is equal to the id of the div selected (i.e. show "under" with id="1" when "section" with id="1" is clicked). How would I do this?
use
.next('div');
so whole code would be
<style>
.under{
display:none;
padding:5px;
background-color:gray;
}
</style>
<div class="section" id="1">Hi</div>
<div class="under" id="1">Hola</div>
<div class="section" id="2">Foo bar</div>
<div class="under" id="2">Derp</div>
<script>
$(".section").click(function(){
$(this).next('div').slideToggle("slow");
});
</script>
working demo
You can use .next, or depending on how you have things setup, .nextAll. Here is a short demo i did for a question similar to this:
http://jsfiddle.net/andresilich/AeGSQ/
Ok there are a few things wrong with your HTML; I will go through them one by one.
There is no opening <table> or <td> tag. This will result in invalid HTML.
There should be a <tr> tag containing the td tag. It is structurally incorrect as it is at the moment.
I am thinking you're using tables for layout; tables should be used for data-display only, not for page layout.
You have multiple ids the same. The idea of an id is that it identifies one element and one element only. Classes are used to style multiple elements the same.
I have rewritten your code at http://jsfiddle.net/FS3rt/. It also contracts any visible sections so that the user is presented only with the information they would like to see.