I have a simple layout like this...
<div class="container">
<div class="row" id="234">
<div class="left special">
This is left content
</div>
<div class="right">
This is right content
</div>
</div>
<div class="row" id="944">
<div class="left">
This is left content
</div>
<div class="right">
This is right content
</div>
</div>
<div class="row" id="332">
<div class="left">
This is left content
</div>
<div class="right special">
This is right content
</div>
</div>
</div>
I am trying to use jQuery to target only the row ids that contain the special class within them. I have this so far
jQuery( ".row:has(.special)" ).addClass( "test" );
But it is not adding the test class, where am I going wrong?
You can simply use the .has method here, to add a class to all elements that have an element with the class special in them:
$(".row").has(".special").addClass("test");
.test{color:red}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row" id="234">
<div class="left special">
This is left content special
</div>
<div class="right">
This is right content
</div>
</div>
<div class="row" id="944">
<div class="left">
This is left content
</div>
<div class="right">
This is right content
</div>
</div>
<div class="row" id="332">
<div class="left">
This is left content
</div>
<div class="right special">
This is right content special
</div>
</div>
</div>
You could always go backwards.
$('.special').closest('.row').addClass('test');
Find the elements with the special class, find their closest parent record with the row class, and put the class on them. Since you are navigating from child to parent, you know that row has a child of special.
Related
I have following HTML structure. Is it possible to select first and last my-item element under parent element purely by CSS?
row in which my-item element is can be wrapped in other divs and (Angular) component elements. Also component elements can be nested within each other. This is HTML structure is generated based on current page.
In JavaScript I would accomplish this by selecting all my-item elements under parent as a flat list and selecting a first and last of them.
UPDATE:
Update HTML template to more resemble my actual page content.
var parentElement = document.querySelector('.parent');
var myItems = parentElement.querySelectorAll('.my-item');
var firstItem = myItems[0];
var lastItem = myItems[myItems.length-1];
firstItem.classList.add('red-background');
lastItem.classList.add('red-background');
.red-background {
background-color: red;
}
<div class="parent">
<person-component>
<div class="template">
<div class="row">
<component-row-template>
<div class="col">
<div class="my-item">Select me!</div>
</div>
<div class="col">
<div class="my-item">Not me</div>
</div>
</component-row-template>
<component-row-template>
<div class="col">
<div class="my-item">Not me</div>
</div>
</component-row-template>
</div>
<div class="row-separator"></div>
<div class="row">
<component-row-template>
<div class="col">
<div class="my-item">Not me</div>
</div>
<div class="col">
<div class="my-item">Not me</div>
</div>
</component-row-template>
</div>
</div>
</person-component>
<div class="row-separator"></div>
<organization-component>
<div class="template">
<div class="row">
<component-row-template>
<div class="col">
<div class="my-item">Not me</div>
</div>
</component-row-template>
</div>
<div class="row-separator"></div>
<div class="row">
<component-row-template>
<div class="col">
<div class="my-item">Not me</div>
</div>
<div class="col">
<div class="my-item">Not me</div>
</div>
</component-row-template>
</div>
<div class="row-separator"></div>
<person-component>
<div class="template">
<div class="row">
<component-row-template>
<div class="col">
<div class="my-item">Not me</div>
</div>
<div class="col">
<div class="my-item">Not me</div>
</div>
</component-row-template>
</div>
<div class="row">
<component-row-template>
<div class="col">
<div class="my-item">Not me</div>
</div>
<div class="col">
<div class="my-item">Not me</div>
</div>
</component-row-template>
</div>
</div>
</person-component>
</div>
</organization-component>
<div class="row-separator"></div>
<div class="row">
<row-template>
<div class="col">
<div class="my-item">Not me</div>
</div>
<div class="col">
<div class="my-item">Not me</div>
</div>
</row-template>
</div>
<div class="row-separator"></div>
<div class="row">
<row-template>
<div class="col">
<div class="my-item">Not me</div>
</div>
<div class="col">
<div class="my-item">Select me!</div>
</div>
</row-template>
</div>
</div>
The below code can work with the assumption that every child div of the parent has the desired ".my-item" and the every ".my-item" is inside a ".col".
It will select the first and the last div from the direct siblings of ".parent" and then will try to find the first and last ".col" and apply the rule to the ".my-item" inside them.
.parent > div:last-of-type .col:last-of-type .my-item,
.parent > div:first-of-type .col:first-of-type .my-item {
background-color: red;
}
If that's not the case and you really don't know anything about the html structure at all, then I am afraid that CSS cannot help you..
Assuming that all .my-items are always wrapped inside a .col that is in turn wrapped inside at least another div (section) and that each section has only one .row (assumption taken from your example), yes it is possible to achieve what you want using a purely CSS approach. The approach is:
Select .parent, as we're only interested only in selecting .my-item inside this element
As all .my-items always have a div container (whether it be a nested container with class section or simply inside a row container), we can specifically determine which wrapper containers are the first and last. These first and last containers, respectively, must be the container in which the first and last my-item are contained.
As all .section container only has one .row, you can easily get the first and last .col of each .section. This means that to get the first .my-item, simply select the first .col and from the first .section wrapper and apply the style to .my-item. Same logic works for your last .my-item.
Here is a minimal working example below:
let firstChild = document.querySelector('.parent > div:first-child .col:first-child .my-item')
let lastChild = document.querySelector('.parent > div:last-child .col:last-child .my-item')
console.log(firstChild, lastChild)
.parent > div:first-child .col:first-child .my-item {
background: #000;
color: #FFF;
}
.parent > div:last-child .col:last-child .my-item {
background: red;
color: #FFF;
}
<div class="parent">
<div class="main-section">
<div class="section-wrapper">
<div class="row">
<div class="col">
<div class="my-item">Select me!</div>
</div>
<div class="col">
<div class="my-item">Not me</div>
</div>
</div>
</div>
</div>
<div class="section-wrapper">
<div class="row">
<div class="col">
<div class="my-item">Not me</div>
</div>
<div class="col">
<div class="my-item">Not me</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="my-item">Not me</div>
</div>
<div class="col">
<div class="my-item">Select me!</div>
</div>
</div>
</div>
As mentioned, this code works if the above assumption is true. One easy example of when this code will break would be when there may be more that two .rows existing in one section-like wrapper.
In a web page, I have a grid of divs. In each div are 3 divs, the 2nd is hidden, I want it so that when the user hovers over the 3rd div, the 1st div becomes hidden and the 2nd is displayed.
I'm using jquery.
<div class="container">
<div class="hello">hello</div>
<div class="who">sailor
</div>
<div onmouseover="whoOn();" onmouseout="whoOff();" class="hover">hover me</div>
</div>
<div class="container">
<div class="hello">hello</div>
<div class="who">dolly
</div>
<div onmouseover="whoOn();" onmouseout="whoOff();" class="hover">hover me</div>
</div>
<div class="container">
<div class="hello">hello</div>
<div class="who">kitty
</div>
<div onmouseover="whoOn();" onmouseout="whoOff();" class="hover">hover me</div>
</div>
Here's a Codepen
Your whoOn and whoOff methods can be combined like this:
<div class="container">
<div class="hello">hello</div>
<div class="who">sailor
</div>
<div onmouseover="whoBoth(this);" onmouseout="whoBoth(this);" class="hover">hover me</div>
</div>
Javascript:
function whoBoth(target) {
$(target).siblings(".hello, .who").toggle();
}
I have a 3 column div with multiple rows. What is the most dynamic way to extract content from the first div and append/prepend this to the 3rd div - Ensuring that all following divs follow along.
here is my example code:
<div class="content">
<div class="item">
<div class="col1">
<div class="img1">
<img src="img_in_first_col">
</div>
</div>
<div class="col2"></div>
<div class="col3">
<div class="img2">
<img src="img_in_third_col">
</div>
</div>
</div>
<div class="item">
<div class="col1">
<div class="img1">
<img src="img_in_first_col">
</div>
</div>
<div class="col2"></div>
<div class="col3">
<div class="img2">
<img src="img_in_third_col">
</div>
</div>
</div>
<div class="item">
<div class="col1">
<div class="img1">
<img src="img_in_first_col">
</div>
</div>
<div class="col2"></div>
<div class="col3">
<div class="img2">
<img src="img_in_third_col">
</div>
</div>
</div>
</div>
I've tried using something along the lines of:
$('.item .col1 .img1').each(function(){
$(this).prependTo('.item .col3 .img2')
})
but what i get is all the images being added to all the rows.
Please help! thanks in advance
Should be as simple as this:
$(".col1").each(function (index, element) {
$(this).closest(".col3").prepend($(this).contents());
});
You could use this to insert column 1 after column 3:
$('.col1').each(function(){
$(this).insertAfter($(this).siblings('.col3'));
});
... or before column 3:
$('.col1').each(function(){
$(this).insertBefore($(this).siblings('.col3'));
});
Used jQuery functions:
insertAfter
insertBefore
siblings
Hi Apparently my toggle function does not work. I need to Hide a div "photography" when clicking the word "photography" that is located in another div. Please see my code below
HTML:
<div class="bar">
<div="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
Photography
Graphics
</div>
</div>
</div>
</div>
<section id="photograhpy" class="photograhpy">
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<hr class="small">
<div class="row">
<div class="col-md-6">
<div class="photograhpy-item">
<a href="#">
<img class="img-photograhpy img-responsive" src="imgs/pics/car1.jpg">
</a>
</div>
</div>
JS:
$(document).ready(function(){
$("#hideshow").click(function(){
$("#photography").toggle(1000);
});
});
Looks like a spelling error:
<section id="photograhpy" class="photograhpy">
Should be:
<section id="photography" class="photography">
There is nothing else outstandingly wrong with your code.
Also, you may not reference elements with the same id exclusively via JavaScript. It is poor practice to give multiple elements the same id.
I have this page where you click on a text block, the box opens comments below it. The row below it shifts down then. Problem is that ALL columns in the row below shift down, which creates a ton of whitespace.Only 1 should shift down (the one below the expanded cell). Is there a way to do this with bootstrap 3?
Yes, you need to change the layout of your grid. you wouldn't lay them out 3 across to a row, you would lay them out going down in columns.
<div class="row">
<div class="col-sm-3">
<div class="idea-block"> ... </div>
<div style="display: none;" class="comment-area"> ... </div>
<div class="idea-block"> ... </div>
<div style="display: none;" class="comment-area"> ... </div>
</div>
<div class="col-lg-6">
<div class="row">
<div class="col-lg-6">
<div class="idea-block"> ... </div>
<div style="display: none;" class="comment-area"> ... </div>
</div>
<div class="col-lg-6">
<div class="idea-block"> ... </div>
<div style="display: none;" class="comment-area"> ... </div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
[here's where to put the picture of
the car spanning 2 columns, so to speak]
</div>
</div>
</div>
<div class="col-sm-3">
<div class="idea-block"> ... </div>
<div style="display: none;" class="comment-area"> ... </div>
<div class="idea-block"> ... </div>
<div style="display: none;" class="comment-area"> ... </div>
</div>
</div>
Make sense?