change nextAll() individually jQuery - javascript

function func(x) {
var y = $("#" + (x.id));
//nextAll get the number at the end of their id -=1
//y.nextAll().attr('id', )
//
y.remove()
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="maindiv">
<div id="div1" onclick="func(this)">Lorem</div>
<div id="div2" onclick="func(this)">Ipsum</div>
<div id="div3" onclick="func(this)">Dolor</div>
<div id="div4" onclick="func(this)">Sit</div>
<div id="div5" onclick="func(this)">Amet</div>
</div>
How would I loop through every div after the selected div?
For example, if the user clicks on div2, div3 will have a function, along with div4 and div5.


You can use each to iterate the elements in the selection
function func(x) {
var y = $(x);
y.nextAll().each(function(index, element){
// do something
})
y.remove()
}


To catch only the divs after the clicked element:
function func(x) {
$(x).nextAll().remove();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="maindiv">
<div id="div1" onclick="func(this)">Lorem</div>
<div id="div2" onclick="func(this)">Ipsum</div>
<div id="div3" onclick="func(this)">Dolor</div>
<div id="div4" onclick="func(this)">Sit</div>
<div id="div5" onclick="func(this)">Amet</div>
</div>


An alternative is using Next Siblings Selector (“target selector ~ next siblings selector”)
$('[id^=div]').on('click', function() {
$(`#${$(this).attr('id')} ~ div`).fadeOut(function() {
$(this).remove()
});
});
[id^=div] {
border: 1px dashed lightgreen;
padding: 5px;
margin: 5px;
cursor: pointer
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="maindiv">
<div id="div1">Lorem</div>
<div id="div2">Ipsum</div>
<div id="div3">Dolor</div>
<div id="div4">Sit</div>
<div id="div5">Amet</div>
</div>

Related

How to correctly target by class name?

I am trying to practice some things on JS, I want to toggle a number of divs on click to change their color but I can't seem to target correctly the first one. It was fine when I did it by tag name but by class it doesnt seem to work. What am I doing wrong? Thanks!
EDIT. This is what my code looks like after your corrections.
<body>
<div class="container">
<div class="one">
</div>
<div class="two">
</div>
<div class="three">
</div>
<div class="four">
</div>
</div>
<script src="script.js"></script>
</body>
let boxOne = document.getElementsByClassName("one")[0]
boxOne.onclick = function() {
alert("Clicked!")
}

I'm going to add that its better to assign an id and use getElementById if the selector is only used by one element.
let boxOne = document.getElementById("one");
let allBoxes = document.getElementsByClassName("square");
boxOne.onclick = function() {
alert("Clicked via ID");
}
const arr = [1, 2, 3];
arr.forEach(i => {
allBoxes[i].onclick = function() {
alert("Clicked via Class");
}
})
.square {
width: 100px;
height: 100px;
background: blue;
margin: 20px;
font-size: 50px;
color: white;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
cursor: pointer;
}
<body>
<div class="container">
<div class="square" id="one">
1
</div>
<div class="square" id="two">
2
</div>
<div class="square" id="three">
3
</div>
<div class="square" id="four">
4
</div>
</div>
</body>

With this line:document.getElementsByClassName(".one")[0]
you are already targeting the div, so change out this:
boxOne[0].onclick =
to this:
boxOne.onclick =

document.
getElementsByClassName returns array of elements with that className (without dot)
querySelector is used for css selectors (eg. ".one", "div.one")
querySelectorAll like 2. but returns array

let boxOne = document.getElementsByClassName("one")[0]
boxOne.onclick = function() {
alert("Clicked!")
}
div {
width: 100px;
height: 100px;
margin: 30px;
background: blue
}
<body>
<div class="container">
<div class="one">
</div>
<div class="two">
</div>
<div class="three">
</div>
<div class="four">
</div>
</div>
<script src="script.js"></script>
</body>

Active on next div and on another remove

I have this solution for simple slider, but I need to preserve class .active like as the first class .row
And the buttons will switch .active class like as the first class .row
Currently, it only switches to the .row class but I need to switch to the .first and .second class.
Here is my actual solution:
$(function(){
$("#next").click(function(e) {
var activeelement = $('.active');
if(activeelement.next().length)
activeelement.removeClass('active').next(".row").addClass('active');
else
activeelement.removeClass('active').closest('.main').find('> .row:first').addClass('active');
});
$("#back").click(function(e) {
var activeelement = $('.active');
if(activeelement.prev().length)
activeelement.removeClass('active').prev().addClass('active');
else
activeelement.removeClass('active').closest('.main').find('> .row:last').addClass('active');
});
});
.main .row {
display: none;
}
.main .row .active {
color: blue;
}
.main .active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class="main">
<div class="row active">
<div class="first active">sss</div>
<div class="second active">ss</div>
</div>
<div class="row">
<div class="first">sss2</div>
<div class="second">ss</div>
</div>
<div class="row">
<div class="first">sss3</div>
<div class="second">ss</div>
</div>
<div class="row">
<div class="first">sss4</div>
<div class="second">ss</div>
</div>
</div>
Back
Next
Thanks.

Use children()
$(function(){
$("#next").click(function(e) {
var activeelement = $('.active');
if(activeelement.next().length-1){
activeelement.removeClass('active').next(".row").addClass('active').children().addClass('active').parent().prev(".row");
activeelement.children().removeClass('active');
}
else{
activeelement.removeClass('active').closest('.main').find('> .row:first').addClass('active').children().addClass('active');
activeelement.children().removeClass('active');
}
});
$("#back").click(function(e) {
var activeelement = $('.active');
if(activeelement.prev().length-1){
activeelement.removeClass('active').prev(".row").addClass('active').children().addClass('active');
activeelement.children().removeClass('active');
}
else{
activeelement.removeClass('active').closest('.main').find('> .row:last').addClass('active').children().addClass('active');
activeelement.children().removeClass('active');
}
});
});
.main .row {
display: none;
}
.main .row .active {
color: blue;
}
.main .active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class="main">
<div class="row active">
<div class="first active">sss</div>
<div class="second active">ss</div>
</div>
<div class="row">
<div class="first">sss2</div>
<div class="second">ss</div>
</div>
<div class="row">
<div class="first">sss3</div>
<div class="second">ss</div>
</div>
<div class="row">
<div class="first">sss4</div>
<div class="second">ss</div>
</div>
</div>
Back
Next

jQuery closest() appears to find parent id when there is none

I have an event listener for when the user clicks in the window. I want to see if the clicked element has any parent element with a certain id. I use the jQuery closest() function for that. But it always returns true.
Here is a fiddle that demonstrates my code.
There must be some major error, because if I change the id from if($(event.target).closest('#activatemenu'))
into any other id
if($(event.target).closest('#rrrrrrr'))
it still returns true.
Code in fiddle:
$(function() {
$(document).click(function(event) {
if($(event.target).closest('#activatemenu')) {
$('.wrap').prepend('<p>the clicked element has a parent with the id of activatemenu</p>');
}else{
$('.wrap p').remove();
}
});
});
.stuff{
width:300px;
height:150px;
border:red 2px solid;
}
.otherstuff{
width:400px;
height:400px;
background:purple;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div id="activatemenu">
<div>
<div>
<div class="stuff">
<p>Here is some text</p>
</div>
</div>
</div>
</div>
<div class="otherstuff">
<p>Other stuff!</p>
</div>
</div>

Closest always returns a jQuery object which resolves to truthy. You need to check the length of the object.
$(event.target).closest('#rrrrrrr').length
Or, use
$(function() {
$(document).click(function(event) {
if ($(event.target).closest('#activemenu').length) {
$('.wrap').prepend('<p>the clicked element has a parent with the id of activemenu</p>');
} else {
$('.wrap p').remove();
}
});
});
.stuff {
width: 300px;
height: 150px;
border: red 2px solid;
}
.otherstuff {
width: 400px;
height: 400px;
background: purple;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div id="activemenu">
<div>
<div>
<div class="stuff">
<p>Here is some text</p>
</div>
</div>
</div>
</div>
<div class="otherstuff">
<p>Other stuff!</p>
</div>
</div>

$(event.target).closest('#activatemenu') will always return an object so if condition will always be true, better check for $(event.target).closest('#activatemenu').length
$(function() {
$(document).click(function(event) {
if($(event.target).closest('#activemenu').length) {
$('.wrap').prepend('<p>the clicked element has a parent with the id of activemenu</p>');
}else{
$('.wrap p').remove();
}
});
});
.stuff{
width:300px;
height:150px;
border:red 2px solid;
}
.otherstuff{
width:400px;
height:400px;
background:purple;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div id="activemenu">
<div>
<div>
<div class="stuff">
<p>Here is some text</p>
</div>
</div>
</div>
</div>
<div class="otherstuff">
<p>Other stuff!</p>
</div>
</div>

You have two problems with your code.
First, you need to search for the closest activemenu not activatemenu. activatemenu does not exist in your code.
Second, jQuery will always return an array so you need to check the length to see whether the element was found as a non-empty array will always return true.
See below for a working example:
$(function() {
$(document).click(function(evt) {
if($(evt.target).closest('#activemenu').length) {
$('.wrap').prepend('<p>the clicked element has a parent with the id of activemenu</p>');
} else {
$('.wrap p').remove();
}
});
});
.stuff {
width: 300px;
height: 150px;
border: red 2px solid;
}
.otherstuff {
width: 400px;
height: 400px;
background: purple;
}
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<div class="wrap">
<div id="activemenu">
<div>
<div>
<div class="stuff">
<p>Here is some text</p>
</div>
</div>
</div>
</div>
<div class="otherstuff">
<p>Other stuff!</p>
</div>
</div>

css selector to exclude certain descendants and their descendants of jquery object?

Given a jquery object that has many levels of descendants, how do you exclude certain descendants AND their descendants? Assume there is a class (.foo in this case) on the top node of the elements intended for exclusion and your jquery object is the div1 below.
EDIT: Clarification: I want to exclude ALL descendants of .foo and not just the immediate children.
$('#button1').click(function() {
var selector = '#test ' + $('#input1').val();
var numberElements = $(selector).length;
$('#numberElements').text(numberElements);
var elementsAsCommaSeparatedList = _.pluck($(selector), 'id');
$('#elementList').text(elementsAsCommaSeparatedList.join(', '));
});
#input1 {
width: 230px;
font-size: 16px;
font-weight: bold;
}
#numberElements,
#elementList {
color: green;
font-weight: bold;
font-size: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label for="input1">Please supply a selector... $('<input id="input1" value="div:not(.foo, .foo *)"></label>')
<button id="button1">Apply Selector</button>
<div>(default value is from #DaniP's answer)</div>
<div id="result"><span>Number of elements selected: </span><span id="numberElements">0</span></div>
<div>
<span>Elements selected (by id):</span>
<span id="elementList"></span>
</div>
<div id="test">
<div id="div1">
<div id="div2">
<div id="div4">
<div id="div8"></div>
<div id="div9"></div>
</div>
<div id="div5" class="foo">
<div id="div10"></div>
<div id="div11"></div>
</div>
</div>
<div id="div3">
<div id="div6">
<div id="div12"></div>
<div id="div13"></div>
</div>
<div id="div7" class="foo">
<div id="div14"></div>
<div id="div15"></div>
</div>
</div>
</div>
</div>

JQuery
With Jquery you can use more than one argument on the :not selector this way will be easy to exlude the .foo and child elements:
$('div:not(.foo, .foo *)')
Example Snippet
$('div:not(.foo, .foo *)').css('border-color','blue')
div {
padding-left:20px;
margin:5px;
border:thin red solid;
}
.foo {
background:rgba(0,0,0,.1)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
DIV1
<div>
DIV2
<div>
DIV4
<div>DIV8</div>
<div>DIV9</div>
</div>
<div class="foo">
DIV5
<div>DIV10</div>
<div>DIV11</div>
</div>
</div>
<div>
DIV3
<div>
DIV6
<div>DIV12</div>
<div>DIV13</div>
</div>
<div class="foo">
DIV7
<div>DIV14</div>
<div>DIV15</div>
</div>
</div>
</div>
But CSS doesn't allow that, refer to this answer.
CSS
On CSS you will need to target all divs that aren't .foo but also overwrite again the child elements of .foo:
div:not(.foo) {
border-color:blue;
}
div.foo * {
border-color:red;
}
Example Snippet
div {
padding-left:20px;
margin:5px;
border:thin red solid;
}
.foo {
background:rgba(0,0,0,.1)
}
div:not(.foo) {
border-color:blue;
}
div.foo * {
border-color:red;
}
<div>
DIV1
<div>
DIV2
<div>
DIV4
<div>DIV8</div>
<div>DIV9</div>
</div>
<div class="foo">
DIV5
<div>DIV10</div>
<div>DIV11</div>
</div>
</div>
<div>
DIV3
<div>
DIV6
<div>DIV12</div>
<div>DIV13</div>
</div>
<div class="foo">
DIV7
<div>DIV14</div>
<div>DIV15</div>
</div>
</div>
</div>

Maybe use the :not selector ?
Something like
div:not(.foo)

Getting divs next to each other when clicking on a button / JQuery

i am making a kind of storyboard where you can add and remove frames but i need to set divs next to each other, the code i now have it places the div's beneath each other. I want to make it with a loop
Here is my code:
HTML
<div id="storyboard">
<div id="container">
<div class="frame">
<div class="frame__outer">
<div class="frame__inner"></div>
<div class="frame__content"></div>
<div type="button" value="fade_in" class="add__button"> + </div>
</div>
</div>
</div>
</div>
JS
_this.addClickFunction = function() {
var i = 0;
$('.add__button').click(function() {
$('.frame').after('<div id="container'+(i++)+'"></div> <div class="frame__outer"> <div class="frame__inner"></div><div class="frame__content"></div></div>');
});
};

Use append() instead of after() function. This should work:
_this.addClickFunction = function() {
var i = 0;
$('.add__button').click(function() {
$('.frame').append('<div id="container'+(i++)+'"></div> <div class="frame__outer"> <div class="frame__inner"></div><div class="frame__content"></div></div>');
});
};
This works for keeping one .frame element and adding multiple divs to it of the structure:
<div class="container[i]">
<div class="frame__outer">
<div class="frame__inner"></div>
<div class="frame__content"></div>
</div>
</div>

If you want to arrange elements side by side which normaly are block elements and thus are positioned underneath eachother by default use either css floats or css flexbox.
https://css-tricks.com/all-about-floats/
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

i need to set divs next to each other
Try this example to add new story container to all current .container
var i = 1;
$('.add__button').click(function() {
i++;
$(".container").each(function(x) {
$(this).after('<div id="container' + x + '_' + i + '" class="container"><div class="frame"><div class="frame__outer"> <div class="frame__inner"></div><div class="frame__content">story ' + i + '</div></div></div></div>');
});
});
.frame__outer {
padding: 20px;
background: #222;
color: white;
border-bottom: solid 3px green;
margin: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="storyboard">
<input type='button' value='add story' class="add__button" />
<div id="container" class='container'>
<div class="frame">
<div class="frame__outer">
<div class="frame__inner"></div>
<div class="frame__content">story 1</div>
</div>
</div>
</div>
</div>

Categories