Jquery appendto div class selector - javascript

I have the following html
<div class="options">
<div class="container">
<div class="swatch-option selected"></div>
<div class="info">Text</div>
</div>
<div class="container">
<div class="swatch-option"></div>
<div class="info">Text2</div>
</div>
</div>
I try jquery to move "info" class, which has the previous class "swatch-option selected", at the end of the closing div class "options"
So my final html should be like
<div class="options">
<div class="container">
<div class="swatch-option selected"></div>
</div>
<div class="container">
<div class="swatch-option"></div>
<div class="info">Text2</div>
</div>
<div class="info">Text</div>
</div>
The jquery I tried is the following but it does not move the info class, which has the previous class swatch-option selected
<script>
require([
'jquery'
], function ($) {
$(document).ready(function(){
$('.selected.info').appendTo('.options');
})
})
</script>

$('.selected.info') means to search for an element that has both selected and info classes but they are siblings in your example.
You can use the adjacent sibling selector (+)
$(document).ready(function() {
$('.selected + .info').appendTo('.options');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="options">
<div class="container">
<div class="swatch-option selected"></div>
<div class="info">Text</div>
</div>
<div class="container">
<div class="swatch-option"></div>
<div class="info">Text2</div>
</div>
</div>

Related

How to add class from multiple div with class "abcd+n" to another div with class "qwer+n"

How to add class from multiple div with class "abcd+n" to another div with class "qwer+n"
for example:
<div class="firstlist">
<a class="firstlistitem-1" ref="#">link1</a>
<a class="firstlistitem-2" ref="#">link2</a>
<a class="firstlistitem-3" ref="#">link3</a>
.........
</div>
and
<div class="secondlist">
<div class="secondlistitem-1">
<div class="incorrect">incorrect answer</div>
<div class="ad_link">CLICK</div>
</div>
<div class="secondlistitem-2">
<div class="incorrect">incorrect answer</div>
<div class="ad_link">CLICK</div>
</div>
<div class="secondlistitem-3">
<div class="correct">correct answer</div>
<div class="ad_link">CLICK</div>
</div>
.........
</div>
On click "CLICK" from "secondlistitem-2" add in "firstlistitem-2" class "incorrect" or "correct"
You can try the following way:
$('.secondlist .ad_linkk').click(function(){
var cls = $(this).prev('div').attr('class');
var p = $(this).parent().attr('class').split('-')[1];
$('.firstlist').find(`a[class*=${p}]`).addClass(cls);
});
.incorrect{ color: red }
.correct{ color: green }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="firstlist">
<a class="firstlistitem-1" ref="#">link1</a>
<a class="firstlistitem-2" ref="#">link2</a>
<a class="firstlistitem-3" ref="#">link3</a>
</div>
<div class="secondlist">
<div class="secondlistitem-1">
<div class="incorrect">incorect answer</div>
<div class="ad_linkk">CLICK</div>
</div>
<div class="secondlistitem-2">
<div class="incorrect">incorect answer</div>
<div class="ad_linkk">CLICK</div>
</div>
<div class="secondlistitem-3">
<div class="correct">corect answer</div>
<div class="ad_linkk">CLICK</div>
</div>
</div>
You can find the appropriate class to add to the link by seeing if the clicked link has a sibling with class .correct. If not, the class must be incorrect. You can then use the .index in the second list of the parent of the link to indicate which of the elements in the first list to highlight:
$('.ad_link').on('click', function() {
let cc = $(this).siblings('.correct').length ? 'correct' : 'incorrect';
let index = $(this).parent().index();
$('.firstlist').children().eq(index).addClass(cc);
});
.correct { color : green; }
.incorrect { color: red; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="firstlist">
<a class="firstlistitem-1" ref="#">link1</a>
<a class="firstlistitem-2" ref="#">link2</a>
<a class="firstlistitem-3" ref="#">link3</a>
</div>
<div class="secondlist">
<div class="secondlistitem-1">
<div class="incorrect">incorrect answer</div>
<div class="ad_link">CLICK</div>
</div>
<div class="secondlistitem-2">
<div class="incorrect">incorrect answer</div>
<div class="ad_link">CLICK</div>
</div>
<div class="secondlistitem-3">
<div class="correct">correct answer</div>
<div class="ad_link">CLICK</div>
</div>
</div>

How to synchronize a div container displaying other elements when active

I have a div containing 3 options that can be active, and when one of them is selected(becomes active) the connector/lines associated with that element should trigger and initiate the animation. So far I have it displayed but can't figure out how to fire the animation every time the first option becomes active, and disable it when it isn't active.
CodePen
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<div class="demo">
<div class="demo__content">
<h2 class="demo__heading">Assessment <small></small></h2>
<div class="demo__elems">
<div class="demo__elem demo__elem-1">Novice Assessment</div>
<div class="demo__elem demo__elem-2">Intermediate Assessment</div>
<div class="demo__elem demo__elem-3">Advanced Assessment</div>
<span class="demo__hover demo__hover-1 active"></span>
<span class="demo__hover demo__hover-2 active"></span>
<span class="demo__hover demo__hover-3 active"></span>
<div class="demo__highlighter">
<div class="demo__elems">
<div class="demo__elem">Novice Assessment</div>
<div class="demo__elem">Intermediate Assessment</div>
<div class="demo__elem">Advanced Assessment</div>
</div>
</div>
<div class="demo__examples">
<div class="demo__examples-nb">
<div class="nb-inner">
<div class="example example-adv">
<div class="example-adv">
<div class="example-adv__top">
<div class="example-adv__top-search"></div>
</div>
<div class="example-adv__mid"></div>
<div class="example-adv__line"></div>
<div class="example-adv__line long"></div>
</div>
</div>
<div class="example example-web">
<div class="example-web__top"></div>
<div class="example-web__left"></div>
<div class="example-web__right">
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
</div>
</div>
<div class="example example-both">
<div class="example-both__half example-both__left">
<div class="example-both__left-top"></div>
<div class="example-both__left-mid"></div>
</div>
<div class="example-both__half example-both__right">
<div class="example-both__right-top"></div>
<div class="example-both__right-mid"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
document.addEventListener('DOMContentLoaded', function() {
$(document).ready(function() {
$('.demo__hover').on('click', function() {
$that = $(this);
if ($('.demo__hover.active').length > 0) {
$('.active').removeClass('active');
}
$($that).addClass('active');
})
})
});
I strongly suggest to refactor my code but I edited your pin, adding a class that block animation by default:
.block-anim {
animation: none !important;
}
and some dirty JS that deal with it
https://codepen.io/ThomasTognacci/pen/POqRJa

how do toggleClass in jquery?

I has example code html
<div class="new">
<div class="wrapper">
<div class="icon"></div>
<div class="content">content</div>
</div>
<div class="list"></div>
<div class="wrapper">
<div class="icon"></div>
<div class="content">content</div>
</div>
<div class="list"></div>
</div>
updated: I want when click to class icon in wrapper first toggle class list first . And class list second not change. Many thanks
$('.icon').click(function(){
$(this).next('.content').toggle('slow')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="new">
<div class="wrapper">
<div class="icon">QWE</div>
<div class="content">content</div>
</div>
<div class="wrapper">
<div class="icon">QWE</div>
<div class="content">content</div>
</div>
</div>
Use .next()
Description: Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.
Or .siblings()
Description: Get the siblings of each element in the set of matched elements, optionally filtered by a selector.

How can I hide the last 3 divs using Jquery

I am trying to select the last 3 divs using JQuery so far I've tried. But it doesn't seem to work
$(document).ready(function(){
$( "div.span4:nth-child(6), div.span4:nth-child(7), div.span4:nth-child(8)" ).
addClass( "myClass" );
});
<div class="row-fluid">
<div class="span4"></div>
<div class="span4"></div>
<div class="span4"></div>
<div class="span4"></div>
<div class="span4"></div>
<div class="span4"></div>
<div class="span4"></div>
<div class="span4"></div>
</div>
Try this:
$('.span4:gt(-4)').hide();
// It's simply "greater than fourth one from the end" ;)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="row-fluid">
<div class="span4">1</div>
<div class="span4">2</div>
<div class="span4">3</div>
<div class="span4">4</div>
<div class="span4">5</div>
<div class="span4">6</div>
<div class="span4">7</div>
<div class="span4">8</div>
</div>
Seems working with nth-child(): http://jsfiddle.net/3b8su8f4/
$(document).ready(function(){
$( "div.span4:nth-child(6),div.span4:nth-child(7),div.span4:nth-child(8) " ).addClass( "myClass" );
});
nth-last-child should do?
$('div.span4:nth-last-child(-n+3)').addClass('myClass');
.span4 {
background: #666;
}
.myClass {
background: #0cc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="row-fluid">
<div class="span4">1</div>
<div class="span4">2</div>
<div class="span4">3</div>
<div class="span4">4</div>
<div class="span4">5</div>
<div class="span4">6</div>
<div class="span4">7</div>
<div class="span4">8</div>
</div>
Use the :gt() selector
var divLength = $('div.span4').length;
$('div.span4:gt(' + (divLength - 4) + ')').hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="row-fluid">
<div class="span4">1</div>
<div class="span4">2</div>
<div class="span4">3</div>
<div class="span4">4</div>
<div class="span4">5</div>
<div class="span4">6</div>
<div class="span4">7</div>
<div class="span4">8</div>
</div>
You can use:
$('div.span4').slice(-3).addClass('myClass');
jsfiddle

jQuery count number of divs with a particular class inside a div with a particular class

How can I count the number of div's with class item that are inside the div with class outer-1? The result here should be 7.
I tried this and several other failed variations of it.
alert( $(".outer-1").$(".item").length );
This gives me 12 which is all the divs on the page.
alert( $(".item").length );
How can i specify only the outer-1 div?
Divs
<div class="outer-1">
<div class="item">a</div>
<div class="item">b</div>
<div class="item">c</div>
<div class="item">d</div>
<div class="item">e</div>
<div class="item">f</div>
<div class="item">g</div>
</div>
<div class="outer-2">
<div class="item">a</div>
<div class="item">b</div>
<div class="item">c</div>
<div class="item">d</div>
<div class="item">e</div>
</div>
Use find() selector:
$(".outer-1").find(".item").length ;
or
$(".outer-1 .item").length
For your html, $(".outer-1 .item").length would be sufficient, but if div.items are nested, like this
<div class="outer-1">
<div class="item">a</div>
<div class="item">b</div>
<div class="item">c</div>
<div class="item">d</div>
<div class="outer-x">
<div class="item">h</div>
<div class="item">i</div>
</div>
<div class="item">e</div>
<div class="item">f</div>
<div class="item">g</div>
</div>
You may want to use $(".outer-1 > .item").length (all div.item that are child of div.outer-1).
See jsFiddle
if you have a bunch of outers with the same name, you may need to loop:
$('.outer-1').each(function(){
console.log( $('.item',this).length );
});

Categories