We Keep Coding

Get href from child element and wrap parent element with a linked overlay

Starting with this:
<div class="outside">
<div class="container">
</div>
</div>
</div>
<div class="outside">
<div class="container">
</div>
</div>
<div class="outside">
<div class="container">
</div>
</div>
What I am trying to achieve:
<div class="outside">
<a href="link1" class="overlay">
<div class="container">
</div>
</a>
</div>
<div class="outside">
<a href="link2" class="overlay">
<div class="container">
</div>
</a>
</div>
<div class="outside">
<a href="link3" class="overlay">
<div class="container">
</div>
</a>
</div>
Needs to work if for any number of ".container" divs. I'm guessing I should be putting the inner hrefs into an array but I'm getting stuck on how to insert the values into the overlay wraps.
Here's one of my attempts:
var arr = $('.container a').map(function() {
return this.href;
}).toArray();
$('.outside').each(function() {
.wrapInner( '<a href=' + arr + '></a>' );
});

You are almost success,just need to using index to get the right link attribute
var links = $('.container a').map(function() {
return $(this).attr("href");
}).toArray();
$(".outside").wrapInner(i => {
return "<a class='overlay' href='"+links[i]+"'></div>";
});
// test data
$(".outside").each((i,e) => {
console.log("------------------")
console.log(e.outerHTML)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="outside">
<div class="container">
Link 1
</div>
</div>
<div class="outside">
<div class="container">
Link 2
</div>
</div>
<div class="outside">
<div class="container">
Link 3
</div>
</div>

Here is a solution with Vanilla JavaScript.
Create an anchor tag
let anchor = document.createElement("a")
Get all the elements with className "outside"
let outside = document.querySelectorAll(".outside")
call a for each for them
outside.forEach( function(element, index) {
anchor.classList.add("overlay")
anchor.setAttribute("href", `link${index+1}`)
let container = element.children[0]
anchor.appendChild(container)
element.prepend(anchor)
console.log(element.outerHTML)
});

Jquery appendto div class selector

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>

make div visible when another div is activated by a button

I'm trying to make 1 button show two divs when I click it using jquery.
So on click of button #show1 I want div #cybernetics + div .gif1 to appear and on click on button #show2 I want div #eat + div .gif2 to appear
Is it possible? thank you!
currently I have the following code
$('document').ready(function() {
$('#show1, #show2, #show3').click( function() {
var $div = $('#' + $(this).data('href'));
$('.demo').not($div).hide();
$div.fadeToggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="show1" data-href="cybernetics"><h2> ></h2></button>
<button id="show2" data-href="eat"><h2> ></h2></button>
<div id="cybernetics" class="demo">
<header>
<h1>CYBERNETICS</h1>
</header>
</div>
<div class="gif1">
<img src="cybernetics.gif">
</div>
<div id="eat" class="demo">
<header>
<h1>E.A.T.</h1>
</header>
</div>
<div class="gif2">
<img src="eat.gif">
</div>

Simply you can show hide as per button click as bewlo.
$('.gif1, .gif2, #cybernetics, #eat').hide();
$('document').ready(function() {
$('#show1').click( function() {
$('.gif1, .gif2, #cybernetics, #eat').hide();
$('#cybernetics').show();
$('.gif1').show();
});
$('#show2').click( function() {
$('.gif1, .gif2, #cybernetics, #eat').hide();
$('#eat').show();
$('.gif2').show();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="show1" data-href="cybernetics"><h2> ></h2></button>
<button id="show2" data-href="eat"><h2> ></h2></button>
<div id="cybernetics" class="demo">
<header>
<h1>CYBERNETICS</h1>
</header>
</div>
<div class="gif1">
<img src="cybernetics.gif">
</div>
<div id="eat" class="demo">
<header>
<h1>E.A.T.</h1>
</header>
</div>
<div class="gif2">
<img src="eat.gif">
</div>

I assume from the logic you're trying to keep this DRY, so you don't want multiple event handlers. As such you can select the target element based on the data-href attribute of the clicked button, then get the next() element from that and fade them both in, something like this:
$('document').ready(function() {
$('.toggle').click(function() {
var $div = $('#' + $(this).data('href'));
$('.demo').not($div).hide().next().hide();
$div.add($div.next()).fadeToggle();
});
});
.demo,
.demo + div {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="show1" class="toggle" data-href="cybernetics"><h2> ></h2></button>
<button id="show2" class="toggle" data-href="eat"><h2> ></h2></button>
<div id="cybernetics" class="demo">
<header>
<h1>CYBERNETICS</h1>
</header>
</div>
<div class="gif1">
<img src="cybernetics.gif">
</div>
<div id="eat" class="demo">
<header>
<h1>E.A.T.</h1>
</header>
</div>
<div class="gif2">
<img src="eat.gif">
</div>

You can make change to below code
<button id="show1" data-href="cybernetics"><h2> ></h2></button>
<button id="show2" data-href="eat"><h2> ></h2></button>
<div class="allBox cybernetics" style="display: none;">
<header>
<h1>CYBERNETICS</h1>
</header>
</div>
<div class="allBox cybernetics" style="display: none;">
<img src="cybernetics.gif">
</div>
<div class="allBox eat" style="display: none;">
<header>
<h1>E.A.T.</h1>
</header>
</div>
<div class="allBox eat" style="display: none;">
<img src="eat.gif">
</div>
and your js code goes here
<script type="text/javascript">
$("#show1").on('click', function(){
hrefVal = $(this).attr('data-href');
$(".allBox").css('display', 'none');
$("."+hrefVal).css('display', 'block');
})
$("#show2").on('click', function(){
hrefVal = $(this).attr('data-href');
$(".allBox").css('display', 'none');
$("."+hrefVal).css('display', 'block');
})
</script>

This is a solution maintaining your data structure and name convention.
I also fix a bug when clicking multiple times on the same button would fade in and out the right items.
$('document').ready(function() {
$('#show1, #show2, #show3').click( function() {
var target = $(this).data('href');
var $div = $('#' + target);
$('.demo').not($div).hide();
$(".gif img:not([src^='"+target+"'])").hide();
$(".gif img[src^='"+target+"']").show();
$div.fadeIn();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="show1" data-href="cybernetics"><h2> ></h2></button>
<button id="show2" data-href="eat"><h2> ></h2></button>
<div id="cybernetics" class="demo">
<header>
<h1>CYBERNETICS</h1>
</header>
</div>
<div class="gif">
<img src="cybernetics.gif">
</div>
<div id="eat" class="demo">
<header>
<h1>E.A.T.</h1>
</header>
</div>
<div class="gif">
<img src="eat.gif">
</div>

Applying behavior to specific div within elements with same class

I am trying to hide div with class="input" only when hidden-span is equal to i-am-secret.
I've tried different approaches using .each(function) or .next() but could not get my head around it. In order to illustrate the example I've added the code bellow.
Please note that I can not add any id's or classes and the order of the rows may vary.
(function($) {
$('.basket__item-row').each(function() {
if ($('.hidden-span').is(":contains('i-am-secret')")) {
$(this).next().hide();
}
});
})(jQuery)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="basket__item-row">
<div class="image">
<div>
I am normal div
</div>
</div>
<div class="input">
Please hide me
</div>
</div>
<div class="basket__item-row">
<div class="image">
<div>
I am extra div
<span class="hidden-span">i-am-secret</span>
</div>
</div>
<div class="input">
Please hide me
</div>
</div>
<div class="basket__item-row">
<div class="image">
<div>
I am normal div
<span class="hidden-span">another class</span>
</div>
</div>
<div class="input">
Please hide me
</div>
</div>

I would do a traversal this way...
$('.hidden-span') // Target all the hidden spans.
.filter(function () { // Filter all the span that contains the text.
return $(this).text().indexOf("i-am-secret") !== false;
})
.closest(".image") // Get the parent `.image`.
.next(".input") // Get the `.input` which is its sibling.
.hide(); // Hide it.
(function($) {
$('.hidden-span').filter(function () {
return $(this).text().indexOf("i-am-secret") !== false;
}).closest(".image").next(".input").hide();
})(jQuery)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="basket__item-row">
<div class="image">
<div>
I am normal div
</div>
</div>
<div class="input">
Please hide me
</div>
</div>
<div class="basket__item-row">
<div class="image">
<div>
I am extra div
<span class="hidden-span">i-am-secret</span>
</div>
</div>
<div class="input">
Please hide me
</div>
</div>
<div class="basket__item-row">
<div class="image">
<div>
I am normal div
</div>
</div>
<div class="input">
Please hide me
</div>
</div>
Please correct the syntax errors. It should be class="basket__item-row".

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