JS - Can I get the next open div element - Not the sibling

JS - Can I get the next open div element - Not the sibling - javascript

Is it possible using just JS (or possibly with jQuery) to get the next open html element?
In the snippet below, if I click on any div it'll give me the id of that div. I want it to get the next open element id, so e.g.
if I click on page123 it should give me 123efter
if I click on 123efter it should give me 13
I don't want the next sibling within the encapsulating div, which is all I've managed to do so far!
document.addEventListener("click", function(event) {
console.log(event.target.id);
}
);
.efter{
min-height:20px;
}
.efter:hover{
background-color:beige;
}
<div>
<div id="1">
home
<div id="1efter" class="efter"></div>
<div id="11">
page11
<div id="11efter" class="efter"></div>
</div>
<div id="12">
page12
<div id="12efter" class="efter"></div>
<div id="121">
page121
<div id="121efter" class="efter"></div>
</div>
<div id="122">
page122
<div id="122efter" class="efter"></div>
</div>
<div id="123">
page123
<div id="123efter" class="efter"></div>
</div>
</div>
<div id="13">
page13
<div id="13efter" class="efter"></div>
</div>
</div>
</div>

I first create a flat array divs with all existing div ids. In the click event handler I then look up the clicked element's successor id.
const divs=[...document.body.querySelectorAll("div")].map(d=>d.id);
document.addEventListener("click", function(event) {
console.log(divs[divs.indexOf(event.target.id)+1]);
}
);
.efter{
min-height:20px;
}
.efter:hover{
background-color:beige;
}
<div>
<div id="1">
home
<div id="1efter" class="efter"></div>
<div id="11">
page11
<div id="11efter" class="efter"></div>
</div>
<div id="12">
page12
<div id="12efter" class="efter"></div>
<div id="121">
page121
<div id="121efter" class="efter"></div>
</div>
<div id="122">
page122
<div id="122efter" class="efter"></div>
</div>
<div id="123">
page123
<div id="123efter" class="efter"></div>
</div>
</div>
<div id="13">
page13
<div id="13efter" class="efter"></div>
</div>
</div>
</div>

As an alternative, and as tagged jquery, you can use jquery's collection.index(element) overload to get the index within a collection.
As a one liner:
console.log($("div").eq($("div").index(this) + 1))
Updated snippet:
$("div").click(function(evt) {
evt.stopPropagation();
// Get once so it's not run multiple times
var divs = $("div");
var idx = divs.index(this);
var result = divs.eq(idx+1)
// do something to demo
console.log(idx, result.attr("id"));
$(".active").removeClass("active");
result.addClass("active");
});
.efter{
min-height:20px;
}
.efter:hover{
background-color:beige;
}
.active { background-color:yellow; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div id="1">
home
<div id="1efter" class="efter"></div>
<div id="11">
page11
<div id="11efter" class="efter"></div>
</div>
<div id="12">
page12
<div id="12efter" class="efter"></div>
<div id="121">
page121
<div id="121efter" class="efter"></div>
</div>
<div id="122">
page122
<div id="122efter" class="efter"></div>
</div>
<div id="123">
page123
<div id="123efter" class="efter"></div>
</div>
</div>
<div id="13">
page13
<div id="13efter" class="efter"></div>
</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 verify that only matching elements are present in a search?

Bad title, I know, but it's hard to explain in few words.
I'm automating on nightwatch and ran into something that has me stumped as I'm used to coding on JS only for automation. Normally, it's easy to verify that an element is present, or that an element is not. But for this, I have an html element that shows that results of a search and I need to verify that the results contain only elements
So, I need to make sure that all result-item on the entity-results div only have results with hint-val-fragment match equal to -1000000.0 and hint-prop equal to cpuLimit:, in this example.
<div class="results" style="">
<!---->
<div>
<div class="results-set-title">Results</div>
<!---->
<div class="entity-results">
<div class="result-item">
<div class="result-item-label">
<div class="result-item-name">Resources</div>
<div class="result-item-source"><span>source:</span> <span>cz0</span></div>
</div>
<div class="result-item-hint">
<div class="hint-prop">cpuLimit:</div>
<div class="hint-val">
<div class="hint-val-fragment">
</div>
<div class="hint-val-fragment match">
-1000000.0
</div>
<div class="hint-val-fragment">
</div>
</div>
</div>
</div>
<div class="result-item">
<div class="result-item-label">
<div class="result-item-name">Resources</div>
<div class="result-item-source"><span>source:</span> <span>cz0</span></div>
</div>
<div class="result-item-hint">
<div class="hint-prop">cpuLimit:</div>
<div class="hint-val">
<div class="hint-val-fragment">
</div>
<div class="hint-val-fragment match">
-1000000.0
</div>
<div class="hint-val-fragment">
</div>
</div>
</div>
</div>
<div class="result-item">
<div class="result-item-label">
<div class="result-item-name">Resources</div>
<div class="result-item-source"><span>source:</span> <span>cz0</span></div>
</div>
<div class="result-item-hint">
<div class="hint-prop">cpuLimit:</div>
<div class="hint-val">
<div class="hint-val-fragment">
</div>
<div class="hint-val-fragment match">
-1000000.0
</div>
<div class="hint-val-fragment">
</div>
</div>
</div>
</div>
<div class="result-item">
<div class="result-item-label">
<div class="result-item-name">Resources</div>
<div class="result-item-source"><span>source:</span> <span>cz0</span></div>
</div>
<div class="result-item-hint">
<div class="hint-prop">cpuLimit:</div>
<div class="hint-val">
<div class="hint-val-fragment">
</div>
<div class="hint-val-fragment match">
-1000000.0
</div>
<div class="hint-val-fragment">
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Below I've defined isValid, which is applied to every element in an array passed to allValid. This function can be applied after there's been an update on the DOM and you need to recheck the elements:
const isValid = elem => {
const val = elem.getElementsByClassName('hint-val-fragment match')[0].innerHTML.trim()
const hint = elem.getElementsByClassName('hint-prop')[0].innerHTML.trim()
return (
val === '-1000000.0'
&& hint === 'cpuLimit:'
)
}
const allValid = arr => arr.every(isValid)
const parent = document.getElementsByClassName('entity-results')[0]
const children = Array.from(parent.children)
const allAreValid = allValid(children)

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

Trying to filter non-hovered elements with jquery

I have an image gallery. Basically I am trying to go for something that lets the hovered image maintain its styling properties but the background (non-hovered images, I should say) filter to grayscale.
This is my first project and I am trying to push myself. I am making some mistakes but learning from each one. Your help is appreciated.
HTML:
<section id="image-gallery">
<div class="container">
<div id="imageboxing" class="disciplines">
<img src="images/martial-arts-banner/boxing.png">
<div class="imagetext">
<h3>BOXING</h3>
</div>
</div>
<div id="imagekb" class="disciplines">
<img src="images/martial-arts-banner/kickboxing.png">
<div class="imagetext">
<h3>KICKBOXING</h3>
</div>
</div>
<div id="muaythai" class="disciplines">
<img src="images/martial-arts-banner/muaythai.png">
<div class="imagetext">
<h3>MUAYTHAI</h3>
</div>
</div>
<div id="wrestling" class="disciplines">
<img src="images/martial-arts-banner/wrestling.png">
<div class="imagetext">
<h3>WRESTLING</h3>
</div>
</div>
<div class="clear"></div>
</div>
</section>
JQUERY:
$(document).ready(function() {
$(".disciplines img").hover(function(){
var images = $(".disciplines img");
$(this).toggleClass("active-image");
$(this).css("cursor", "pointer");
$(this).next().find('h3').slideToggle();
if (images.not(".active-image") {
$(images).css("filter", blur("20px"));
}
});

You have to do it like below:-
$(document).ready(function() {
$("#image-gallery img").hover(function(){ // on hover of image
$(this).toggleClass("active-image");
$(this).css("cursor", "pointer");
$(this).parent().css({"filter": ""}); //remove it's parent filter css
$('img').not($(this)).parent().css({"filter":'blur(5px)'}); //add filter css to all othe images parent-div apart from thr current clicked-one
}, function () { //when hover-out
$('.disciplines').css({"filter": ""}); //remove filter css from all div
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="image-gallery">
<div class="container">
<div id="imageboxing" class="disciplines">
<img src="https://ae01.alicdn.com/kf/HTB1dizJKFXXXXa_XFXXq6xXFXXXs/Closed-Type-Boxing-Helmet-Head-Protector-For-Taekwondo-Karate-Tai-MMA-Muay-Thai-Kickboxing-Competition-Training.jpg_50x50.jpg">
<div class="imagetext">
<h3>BOXING</h3>
</div>
</div>
<div id="imagekb" class="disciplines">
<img src="http://www.days-gym.com/wp-content/uploads/2015/11/days-gym-website-logo.png">
<div class="imagetext">
<h3>KICKBOXING</h3>
</div>
</div>
<div id="muaythai" class="disciplines">
<img src="https://i.pinimg.com/favicons/50x/ded1fa7e09a93f576a8dc1060fbf82f7e63076e47a08abd0cf27887f.png?ca1416448b5d5bfb6c7465ba2cb5e0d4">
<div class="imagetext">
<h3>MUAYTHAI</h3>
</div>
</div>
<div id="wrestling" class="disciplines">
<img src="https://iawrestle.files.wordpress.com/2017/06/screen-shot-2017-06-14-at-10-35-09-am.png?w=50&h=50&crop=1">
<div class="imagetext">
<h3>WRESTLING</h3>
</div>
</div>
<div class="clear"></div>
</div>
</section>

Expand / Show and hide div element in a listview

As you can see, is this a list view and my mission is when you click on an element / div then the div with the images expand / show. Now that is easy, even for a backend developer, but I would like to:
1. when I click again on the same element, then the element will hide.
2. When I click on another element, then the element that is already expand will hide and the other element that I click on, will expand / show.
I need Script and CSS for this please.
<div class="row">
#foreach(var post in CurrentPage.Children)
{
<div class="col-md-12">
<div class="content equal" onclick="showhide()">
<a href="#post.Url">
<div class="date">#post.CreateDate.ToLongDateString()</div>
<h2>#post.Name</h2>
<p>#Umbraco.Truncate(post.Introduction, 240, true)</p>
</a>
</div>
<div class="images(-expand)">
<img src="#post.Image" />
</div>
</div>
}
</div>

Try as follows.
$('.content.equal').click(function() {
$('.content.equal').not(this).next().slideUp();
$(this).next().slideToggle();
});
$('.content.equal a').click(function(event) {
event.preventDefault();
});
.images {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12">
<div class="content equal">
<a href="#post.Url">
<div class="date">12-01-2017</div>
<h2>Name1</h2>
<p>#Umbraco.Truncate(post.Introduction, 240, true)</p>
</a>
</div>
<div class="images">
<img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg" />
</div>
</div>
<div class="col-md-12">
<div class="content equal">
<a href="#post.Url">
<div class="date">12-01-2017</div>
<h2>Name1</h2>
<p>#Umbraco.Truncate(post.Introduction, 240, true)</p>
</a>
</div>
<div class="images">
<img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg" />
</div>
</div>
<div class="col-md-12">
<div class="content equal">
<a href="#post.Url">
<div class="date">12-01-2017</div>
<h2>Name1</h2>
<p>#Umbraco.Truncate(post.Introduction, 240, true)</p>
</a>
</div>
<div class="images">
<img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg" />
</div>
</div>

We Keep Coding

JavaScript is the programming language of the Web.

JS - Can I get the next open div element - Not the sibling - javascript

Related

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

How to verify that only matching elements are present in a search?

How to synchronize a div container displaying other elements when active

Trying to filter non-hovered elements with jquery

Expand / Show and hide div element in a listview

Categories

Resources