I have a long list of items. One of them is active. From that active item I want to go to the previous one. I can do that with previousElementSibling.
The problem is that I want to skip the hidden elements. How can I do that?
const active = document.querySelector('.active');
const prev = active.previousElementSibling;
console.log(active);
console.log(prev);
<div></div>
<div hidden></div>
<div class="active"></div>
In the real world, the list is dynamic and longer so no crazy hacks will work.
You can do this by looping to repeatedly walk through previousElementSibling's, until you find one that's not hidden. For example:
const active = document.querySelector('.active');
// Get the previous sibling
let result = active.previousElementSibling;
// If it's hidden, continue back further, until a sibling isn't hidden
while (result && result.hidden == true) {
result = result.previousElementSibling;
}
if (result) {
// You got a non-hidden sibling!
console.log(result);
} else {
// There is no previous sibling that's not hidden
}
You can keep going to previous elements until you find one that is not hidden or until you reach the first element :
const active = document.querySelector('.active');
let prev = active.previousElementSibling;
while (prev !== null) {
if (!prev.hidden) break;
prev = prev.previousElementSibling;
}
console.log(active);
console.log(prev);
Related
I am following this Js fiddle
http://jsfiddle.net/ryt3nu1v/10/
My Result:
I am making a slider that display age as I have an array that following ages
15,25,35,45,55
I am trying to display them in slider
expected behavior is to see the next age when i click on next button
Code that I used from fiddle according to my need is
//Age slider
$('div.result-age:gt(0)').hide(); //Hide all but the first one
var $allSlides = $('div.result-age'),
traverseDefault = "first", //set the defaults
actionDefault ="arrow-next";
$('.arrow-next,.selected-arrow-left-pointer').click(function(){
var traverse = traverseDefault,
action = actionDefault;
if($(this).is('.selected-arrow-left-pointer')){ //if action is prev
traverse = "last"; //set traverse to last in case nothing is available
action = "selected-arrow-left-pointer"; //set action to prev
}
var $curr = $allSlides.filter(':visible'), //get the visible slide
$nxtTarget = $curr[action](".result-age"); //get the next target based on the action.
$curr.stop(true, true).fadeIn(1000).hide(); //hide current one
if (!$nxtTarget.length){ //if no next
$nxtTarget = $allSlides[traverse](); //based on traverse pick the next one
}
$nxtTarget.stop(true, true).fadeIn(1000); //show the target
});
//age slider end
And this is my HTML
<div class="result-box">
<div class="selected-arrow-left-pointer"></div>
<div class="result-age"><span><h4 v-for="(row,key,index) in ages">ALL ages here currently being display all at once</h4></span></div>
<div class="arrow-next"></div>
</div>
My current style is that age will be displayed in center with left and right sides having next and previous button
What am I missing?
Your v-for is creating mutliple h4 tag but you need create result div for each numbers so move your v-for inside your div tag .Then , you are using wrong values for actionDefault and action it should be next & prev where next refer to next slide and prev refer to previous slide not the classnames .
Demo Code :
$('div.result-age:gt(0)').hide();
var $allSlides = $('div.result-age'),
traverseDefault = "first",
actionDefault = "next"; //use next ..refer next node
$('.arrow-next,.selected-arrow-left-pointer').click(function() {
var traverse = traverseDefault,
action = actionDefault;
if ($(this).is('.selected-arrow-left-pointer')) {
traverse = "last";
action = "prev"; //use prev..refer prev..
}
var $curr = $allSlides.filter(':visible');
$nxtTarget = $curr[action](".result-age");
$curr.stop(true, true).fadeIn(1000).hide();
if (!$nxtTarget.length) {
$nxtTarget = $allSlides[traverse]();
}
$nxtTarget.stop(true, true).fadeIn(1000);
});
span.next,
span.prev {
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="result-box">
<div class="selected-arrow-left-pointer">
<< </div>
<!--your div should have ` v-for="(row,key,index) in ages"`-->
<div class="result-age"><span><h4>1</h4></span></div>
<div class="result-age"><span><h4>2</h4></span></div>
<div class="result-age"><span><h4>3</h4></span></div>
<div class="arrow-next"> >> </div>
</div>
I found the issue, you were using arrow-next instead of next, and selected-arrow-left-pointer instead of prev. Check the below working snippet. The data can be provided dynamically as you wish, currently I have given static data.
The next and prev are reserved keywords and hence the $curr[action] was expecting a function in return, while in your case it was `$curr['arrow-next'] instead of $curr['next'], which was returning undefined, and hence the error occurred.
//Age slider
$("div.result-age:gt(0)").hide(); //Hide all but the first one
var $allSlides = $("div.result-age"),
traverseDefault = "first", //set the defaults
actionDefault = "next";
$(".next,.prev").click(function () {
var traverse = traverseDefault,
action = actionDefault;
if ($(this).is(".prev")) {
//if action is prev
traverse = "last"; //set traverse to last in case nothing is available
action = "prev"; //set action to prev
}
var currentData = $allSlides.filter(":visible"), //get the visible slide
$nxtTarget = currentData[action](".result-age"); //get the next target based on the action.
currentData.stop(true, true).fadeIn(1000).hide(); //hide current one
if (!$nxtTarget.length) {
//if no next
$nxtTarget = $allSlides[traverse](); //based on traverse pick the next one
}
$nxtTarget.stop(true, true).fadeIn(1000); //show the target
});
.next, .prev {
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="result-box">
<div class="prev"><</div>
<div class="result-age">
<span><h4>ALL ages here currently being display all at once</h4></span>
</div>
<div class="result-age">
<span><h4>2</h4></span>
</div>
<div class="result-age">
<span><h4>3</h4></span>
</div>
<div class="result-age">
<span><h4>4</h4></span>
</div>
<div class="result-age">
<span><h4>5</h4></span>
</div>
<div class="next">></div>
</div>
I'm creating a toggle review form that displays when you hit Edit, but I only want this to work on on the review the button is a sibling of, as opposed to all review edit forms on the page (as there may be multiple).
I know how to do this in jquery but am trying to keep this project all vanilla js.
const button = document.querySelector('.toggle-edit-form');
const form = document.querySelector('.edit-review-form');
button.onclick = function() {
// toggle the edit button text on click
button.innerHTML === 'Edit' ? button.innerHTML = "Cancel" : button.innerHTML = "Edit";
// toggle visibility of edit review form
form.classList.toggle('toggle')
};
I could use nextSibling I suppose (as it is currently the next sibling) but would prefer a solution that won't break the code if change the order / html.
Thanks!
#Mike you can try creating a function that uses a while loop to keep track of siblings , I hope this helps
var getSiblings = function (elem) {
// Setup siblings array and get the first sibling
var siblings = [];
var sibling = elem.parentNode.firstChild;
// Loop through each sibling and push to the array
while (sibling) {
if (sibling.nodeType === 1 && sibling !== elem) {
siblings.push(sibling);
}
sibling = sibling.nextSibling
}
return siblings;
};
Simply put, my goal is to make the "next" button add a class active to the previous list item, then if the active class exists, also prepend a YES to that list item, not all list items as it is currently doing in my code.
Currently, my attempt is adding YES to all list items, I want to add YES only to the previous items after each click.
My attempt is here:
var $tabs = $('li');
$('.next').on('click', function () {
$tabs.next('li').addClass("active").css("background-color","yellow");
if ($($tabs).next().hasClass("active")){
$($tabs).prepend('YES').prev();
} else {
$($tabs).append('NO');
}
});
Code can be seen here:
http://codepen.io/anon/pen/yrjvb
I'm not sure if I understood you correctly, but this might be what you're looking for :
var $tabs = $('li');
var count = 0;
$('.next').click(function () {
var tab = $tabs.eq(count);
var link = tab.find('a[data-toggle="tab"]');
link.addClass("active").css("background-color","yellow");
if (link.hasClass("active")) {
tab.prepend('YES');
count++;
} else {
tab.append('NO');
}
});
Forked Codepen : http://codepen.io/anon/pen/pnKAc?editors=101
Basically, you were selecting all the <li> items. In my code, I select an item one-by-one.
Surely there is a better way to do it (selecting directly the next element etc., but I guess with this code you can see what's different.
Also, you say you want to add, did you mean "append", then ?
How about this approach (codepen): Store the current one, clear its active state, pick the next one ?
$('.next').on('click', function () {
var $current = $('li.active');
if(!$current.length){
$current = $('li:first');
$current.addClass('active');
}else{
$current.removeClass('active');
$current.next('li').addClass('active');
}
});
I have the elements in the div as mentioned below:
<div id="container">
<div id="first_div">
<div id="comment-1" class="comment">Child 1 of first div</div>
<div id="comment-2" class="comment">Child 2 of first div</div>
<div id="comment-3" class="comment">Child 3 of first div</div>
<div id="comment-4" class="comment">Child 4 of first div</div>
</div>
<div id="second_div">
<div id="comment-5" class="comment">Child 1 of second div</div>
<div id="comment-6" class="comment">Child 2 of second div</div>
<div id="comment-7" class="comment">Child 3 of second div</div>
<div id="comment-8" class="comment">Child 4 of second div</div>
</div>
<div id="third_div">
<div id="comment-9" class="comment">Child 1 of third div</div>
<div id="comment-10" class="comment">Child 2 of third div</div>
<div id="comment-11" class="comment">Child 3 of third div</div>
<div id="comment-12" class="comment">Child 4 of third div</div>
</div>
I need to retrieve the next element from comment id comment-4.
$('#comment-4').next().attr('id') gives me result as undefined.I need the target div to be comment id - comment-5.How to retrieve the next element of div from another div using jquery?
Try this :
$(function(){
$('.comment').click(function(index){
var id;
if ( $(this).is(':last-child') )
id = $(this).parent().next().children(':first').attr('id');
else
id = $(this).next().attr('id');
alert(id);
});
});
Demo
Demo : http://jsfiddle.net/abdennour/PU54r/
function nextOf(id,cyclic){
var ids= $('div[id^=comment-]').toArray().map(function(e){return $(e).attr('id')}).sort();
var idx=ids.indexOf("comment-"+id);
if(idx!==-1){
if(ids.length> idx+1){
return $('div#'+ids[idx]);
}
else{
// it is the last div: if it is cyclic ,you may return the first
if(cyclic){
return $('div#'+ids[0]);
}
}
}else{
// no div with this id
}
}
Then :
var target=nextOf(4)
if(target){
target.html()
//--> Child 1 of second div
}
I think you can use $('.comment') to pick up all of your wanted, and save them in some variable such as var arrResult = $('.comment');.
So far, you can choose what you wanted use the arrResult variable.
Because your inner-most divs have different parents, I would first get all the divs you care about:
var comments = $('.comment');
Next, if we can assume your id's are all numbered sequentially, get the number in the id (assuming this references the element):
var index = parseInt($(this).attr('id').substr(8));
Now, the next div in the comment list is at that position in the comments:
var nextDiv = comments[index];
Just for good measure, I'd first make sure index is set:
var nextDiv;
if (index < comments.length) {
nextDiv = comments[index];
}
You could use an index in your case :
JS:
for (var index = 0; index <= 12; ++index) {
$("#comment-" + index).attr("id");
}
You can define a statement which checks the target id is the last child, than you can return a function according to value.
jsFiddle Demo
var target = 'comment-4';
$('.comment').each(function(i) {
if ( $(this).attr('id') == target ) {
if ( $(this).is(':last-child') ) {
$(this).parent().next().children().first().addClass('red');
}else{
$(this).next().addClass('red');
}
}
});
Here is one way - http://jsfiddle.net/jayblanchard/WLeSr/
$('a').click(function() {
var highlight = $('.highlight');
var currentIndex = $('.comment').index(highlight); // get the index of the currently highlighted item
$('.comment').removeClass('highlight');
var nextIndex = currentIndex + 1;
$('.comment').eq(nextIndex).addClass('highlight');
});
It is showing undefined because comment-4 and comment-5 are childrens of different parent elements. Means comment-4 is children of first_div and second_div parent of comment-5.
You can get the comment-5 using below code.
$('#comment-4').parent().next().children().attr('id');
Assuming jQuery-wrapped element is collected in $comment, there's one way to solve it:
function getNextComment($comment) {
var $nextComment = $comment.next();
if ($nextComment.length) {
return $nextComment;
}
var $nextParent = $comment.parent().next();
if ($nextParent.length) {
return $nextParent.children().first();
}
return null;
}
Demo. Click on one comment - and see the next one's highlighted. )
The base algorithm's very simple here. First, we attempt to retrieve the next sibling of the given element. If there's one, it's returned immediately. If not (and it's the case with #comment-4 in your question - it's the last element in its hierarchy), we go up the DOM chain for its parent (#first-div, in this case), and look for its next sibling (#second-div). If it exists, then its very first child element is returned. If it doesn't, null is returned (we can actually return an empty jQuery object - $(), but that depends on use cases.
Just one instruction : )
$('<div id="mock" />').append($('.comment').clone()).find('#comment-4').next().attr('id')//---> comment-5
Based on divs have the same Css class .comment
DEMO
Why not this will be undefined: $('#comment-4').next().attr('id') because there is no next element. as you mentioned that you want to target the #comment-5 in the next div's child then you can do this:
function giveId(el) {
var sel = el.id ? '#'+el.id : '.'+el.className;
var id = $(sel).next('div').length ? $(sel).next('div').attr('id') : $(sel).parent('div').next('div').find('> div:first').attr('id');
return id || "Either no next elem exist or next elem doesnot have any id/class.";
}
$(function () {
$('div').click(function (e) {
e.stopPropagation();
alert(giveId(this));
});
});
Updated Demo in action
Try this: JSFiddle (The easiest solution!)
$(document).ready(function(){
var currDiv = $("#comment-4"); // Try with different valies: "#comment-x"
currDivId = currDiv.prop('id');
lastDivId = currDiv.parent('div').find('.comment').last().prop('id');
if(currDivId == lastDivId){
var nextComment = currDiv.parent('div').next('div').find('.comment').prop('id');
}else{
var nextComment = currDiv.parent('div').find('.comment').next().prop('id');
}
alert(nextComment);
});
I have a Bullet Region like
HelloHowareyou
No i am selecting are and changing to Number Bullet.
so my list should change like
HelloHowareyou
want to end the Disc bullet after second child.
want to add Third child as sibling to parent.
Want to again make Disc bullet to fourth child and add it as sibling to parent.
How can i do this.
This is actually a non-trivial and very interesting problem. However, you need to first know a couple of things:
The bullets on a list item are determined by its list; ul is for unordered lists (ie. disk bullets), and ol is for ordered lists (ie. numbered bullets).
You cannot have an li without its parent being either ul or ol.
You cannot have a ul be a direct child of a ol or vice versa (they can be children of an li though, but then they'll be sublists)
This means that every time you switch a list, you need to make sure that the item you're switching has a parent of the correct (and opposite) type, and the items before and after it are also in (separate) lists of the correct type. You will in many cases need to create those lists (or delete them, when they become empty).
Anyway, words are worthless, here's the code (I'm using jQuery, but the idea should be the same regardless of what you use):
$('li').on('click', function () {
var $listItem = $(this);
var $list = $(this).parent();
var $items = $list.children();
var itemIndex = $items.index($listItem);
var numItems = $items.length;
var curType = $list.is('ul') ? 'ul' : 'ol';
var newType = curType === 'ul' ? 'ol' : 'ul';
var $prev = $list.prev();
var $next = $list.next();
if (itemIndex === 0) {
// The item we're switching is the first Item in the list
if (!$prev.is(newType)) {
$prev = $('<' + newType + '/>');
$prev.insertBefore($list);
}
$prev.append($listItem);
} else if (itemIndex === numItems - 1) {
// The item we're switching is the last Item in the list
if (!$next.is(newType)) {
$next = $('<' + newType + '/>');
$next.insertAfter($list);
}
$next.prepend($listItem);
} else {
// The item is in the middle, we need to split the current list into 3.
$tailList = $('<' + curType + '/>');
$tailList.append($listItem.nextAll());
$tailList.insertAfter($list);
$middleList = $('<' + newType + '/>');
$middleList.append($listItem);
$middleList.insertAfter($list);
}
if (numItems === 1) {
// list used to have only one Item, so it's now empty, and should be removed.
$list.remove();
if ($prev.is(newType) && $next.is(newType)) {
// The two surrounding lists are of the same type and should be merged.
$prev.append($next.children());
$next.remove();
}
}
});
I'm using the click event on a list item to switch a list item. Here's a jsFiddle link for you to play around with the implementation and validate that everything works as expected: http://jsfiddle.net/8Z9rf/
The code can definitely be optimized for speed/performance, but I was aiming for simplicity and clarity, I hope I managed to accomplish this.