jQuery using index() - javascript

I am horrible at explaining on what I want, but ill give it a shot.
Ok here is html on the left side.
<div></div>
<div></div>
<div></div>
<div></div>
Here is what is outputting on the right side.
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
I am trying to make it so when you click the first div on the left, the first div on the right appears, and when u click second div on the left, the second div on the right appears while all the other divs on the right are hidden again and so on. I know you can do it with the .index() in jQuery, but I was wondering if i can get some help on how to do it. Thanks!

Something like this?
Markup
<div class="left">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<div class="right">
<div class="block">Result 1</div>
<div class="block">Result 2</div>
<div class="block">Result 3</div>
<div class="block">Result 4</div>
</div>
JS
$(function(){
$('.left > div').on('click', function(){
//Just show the respective block div based on the clicked index and hide its siblings that are visible.
$('.block').eq($(this).index()).show().siblings('.block:visible').hide();
});
});
Demo
With a little slide Effect
$(function () {
$('.block').eq(0).show();
$('.left > div').on('click', function () {
var elemToShow = $('.block').eq($(this).index()); //Get the element to show
$('.block:visible').stop().slideUp(1000, function () { // slide up the visible block div
elemToShow.stop().slideDown(1000); // once the animation finishes shidedown the element to show
});
});
});
Demo Slide effect
Demo Fade effect

Assuming you'll put a left class on those left divs:
var $blocks = $('.block'),
$left = $('.left');
$('.left').click(function () {
$blocks.hide().eq( $left.index(this) ).show();
});
Here's the fiddle: http://jsfiddle.net/YddrP/

Well, you first have to detect the click on the elements on the left. In the callback function, you'll have to find out the index of the clicked div and then show() the one on the right side whose index matches the number.
Let's say you have the left divs inside a container with the class left and the ones on the right inside right:
$('.left').on('click', 'div', function(){ //bind the click event to the left divs
$('.right div') // select all the divs inside .right
.hide() // hide all the divs
.eq( $(this).index() ) // select the one that matches the clicked index
.show(); // show it
});
Here's a demo.
Here is the documentation for on().
Here is the documentation for eq().

Yes, you can try .index() and :eq()
.index() returns the numeric index of an element, while :eq() returns the element by a numeric index.
Assume the left divs are inside a outer div with class 'left', and right divs inside 'right'
$('.left div').click(function () {
$('.right div').hide();
var i = $('.left div').index(this);
$('.right div:eq(' + i + ')').show()
});

Related

jQuery detect when scroll is within and not past a certain div

I have the following divs
<div id="item-1" >item 1 content get here </div>
<div id="item-2" >item 2 content get here </div>
I would like to execute a function when the scroll is between the div content and when the scroll goes beyond the div then execute a different function.
In my jQuery I have
$(window).on('scroll', function() {
var divs = ["item-1","item-2"]; //the above two divs
divs.forEach(function(item){
var current_div = $('#'+item).offset().top
if(current_div < window.pageYOffset) {
console.log("I have reached the div", item);
}
});
});
The above works when scrolling to the bottom, but doesn't work when scrolling to top. It also doesn't detect when I scroll beyond a certain div.
How can I detect when scroll is only with a certain div? The divs are dynamic, hence the need to use the array.
Your solution should work with the code below.
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256 QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
$(window).on('scroll', function() {
var divs = ["item-1","item-2"]; //the above two divs
divs.forEach(function(item){
var current_div = $('#'+item).offset().top
if(current_div < window.pageYOffset) {
console.log("I have reached the div", item);
}
});
});
And then your HTML
<div id="item-1" >item 1 content get here </div>
<div id="item-2" >item 2 content get here </div>
Note: The only change made is the JQuery inclusion.
Enjoy!

hide all but one element of certain class in Jquery

I am trying to create an effect whereby clicking on a title toggles the corresponding content div. Clicking on another title while some content is showing should hide that content div and show the content div corresponding to the title just clicked.
However the code is not doing anything, as you can see on the following jquery: http://jsfiddle.net/dPsrL/
Any ideas?
HTML:
<div class="row title">
<div class="title" industry_id="education">Ed</div>
<div class="title" industry_id="tech">Tech</div>
<div class="title" industry_id="finance">Fin</div>
</div>
<br>
<br>
<div class="row content">
<div class="content" id="education">Education is great</div>
<div class="content" id="tech">Technology is awesome</div>
<div class="content" id="finance">Finance is super</div>
</div>
JAVASCRIPT:
$(document).ready(function () {
$('.content').hide();
});
('.title').on('click', function () {
var clicked = $(this).attr('industry_id');
alert(clicked);
$("#"+clicked).toggle(400);
$("#"+clicked).siblings().hide();
});
Instead of toggling the clicked element first and then hiding the others, why don't you just hide everything first and then show the clicked one? Saves you a check, and all you have to do is switch the order
$('.title').on('click', function () {
var clicked = $(this).attr('industry_id');
alert(clicked);
$('.content').hide();
$('#' + clicked).show(400);
});
Your attribute doesn't have the id selector in it. You need to do a string concatenation :
$('.title').on('click', function () {
var clicked = $(this).attr('industry_id');
alert(clicked);
$('#' + clicked).toggle(400);
$('#' + clicked).siblings().hide();
//The two last lines could be :
//$('#' + clicked).toggle(400).siblings().hide();
});
Also you have to remove the class content and title on the row since it trigger the click event and the hide part.
Here's a working fiddle : http://jsfiddle.net/dPsrL/3/
Typo on ('.title'). Should be $('.title'). Also, you should probably not give the container divs the same class as the child divs and then use that same class in your CSS and jQuery. It just makes selection more difficult.
jsFiddle example

targeting a div in an ocean of nested dynamically added divs

I'm using the liferay framework and I need to add a JavaScript detected inline height to a very very specific div in my page. The problem is I need to target it going through an unknown number of dynamically added divs with dynamically added classes and IDs. To complicate this even further, the divs are randomly siblings or nested in each other.
Here's what it looks like:
<div class="known-class">
<div class="unknown dynamicallygenerated"></div>
<div class="unknown dynamicallygenerated">
<div class="unknown dynamicallygenerated">
<div class="unknown dynamicallygenerated"></div>
<div class="unknown dynamicallygenerated">
<div class="DIV-I-WANT-TO-TARGET">this is the div i need to Target with my css/javascript</div>
</div>
</div>
</div>
obviously I can't target it simply with
function resize() {
var heights = window.innerHeight;
jQuery('.DIV-I-WANT-TO-TARGET').css('height', heights + "px");
}
resize();
Because that class is present elsewhere, I would rather target it with something like.
jQuery('.known-class .DIV-I-WANT-TO-TARGET')
Which obviously doesn't work because there's a ton of other divs in the middle and my div is not a child of ".known-class"
I was asking myself if there was any jQuery that could help. Something like:
Catch any div with .DIV-I-WANT-TO-TARGET class that is "generically" inside another div that has .known-class
Is this possible? thanks a lot for your help!
Something like this would work:
// this will target the known-class and find all children with DIV-I-WANT-TO-TARGET
$('div.known-class').find('div.DIV-I-WANT-TO-TARGET');
// this will target the known-class and find the first DIV-I-WANT-TO-TARGET
$('div.known-class').find('div.DIV-I-WANT-TO-TARGET').first();
$('div.known-class').find('div.DIV-I-WANT-TO-TARGET:first');
$('div.known-class').find('div.DIV-I-WANT-TO-TARGET:eq(0)');
$('div.known-class').find('div.DIV-I-WANT-TO-TARGET').eq(0);
You can try in your css file
.known-class div div div div{}
The last div being the DIV-I-WANT-TO-TARGET
Assuming that you are adding the divs starting from the outer to the inner
Assign an equal name plus a number starting from 1
<div class="known-class">
<div class="unknown dynamicallygenerated" id="dynamicdiv1"></div>
<div class="unknown dynamicallygenerated" id="dynamicdiv2">
<div class="unknown dynamicallygenerated" id="dynamicdiv3">
<div class="unknown dynamicallygenerated" id="dynamicdiv4"></div>
<div class="unknown dynamicallygenerated" id="dynamicdiv5">
<div class="DIV-I-WANT-TO-TARGET" id="dynamicdiv6"></div>
</div>
</div>
</div>
The use jQuery [.each][1] to loop through all the divs on the document
$( document.body ).click(function() {
$( "div" ).each(function( i ) {
if ( this.style.color !== "blue" ) {
this.style.color = "blue";
} else {
this.style.color = "";
}
});
});
When you reach the last item in numeric order. (you can use any split function) add the attributes to that div
you need to select last div inside the known-class:
$('.known-class').find('div:last').css('background', 'Red')
OR if you want to select all the .known-class :
$('.known-class').each(function() {$(this).find('div:last').css('background', 'Red')});
Actually your selector works just fine:
$('.known-class .DIV-I-WANT-TO-TARGET')
With a space, selectors will find any descendant.
The search is only limited to direct descendants (immediate children) if you use the > operator.
So $('.known-class > .DIV-I-WANT-TO-TARGET') would not find what you wanted.

Traversing DOM from span in / out of divs

I'm adding a click event to a span that is within a div. The target of this event, which will become visible, is a first div that is within a div, two divs down. How can I traverse the DOM to find it?
Perhaps it'll be clearer with the code:
<div a>
<h2>
<span id="here">Click</span>
</h2>
</div>
<div></div>
<div>
<div class="targetDiv">This is the div we need to find</div>
<div class="targetDiv">There are other divs with the same id, but we don't need to find those</div>
<div class="targetDiv">Not looking for this one </div>
<div class="targetDiv">Or this one either</div>
</div>
I've searched left and right and cannot find an answer. It's important to restrict the event ONLY to the first div immediately after the span.
Any help would be much appreciated.
As shown, the code would look like this:
$('span#here').on('click', function() {
$(this).closest('div').siblings(':contains(.targetDiv)').children().eq(0).show();
}
Here's a sample of the fish we caught
$(function() {
$('#here').on('click', function() {
var div = $(this) //the element clicked
.closest('div') //find nearest parent div
.nextAll(':eq(1)') //find the second next div
.children(':eq(0)') //find the first child of it
.show(); //remove invisible cloak
});
});​
This works. I provided an example you can just save to a html file and test it yourself
<style>
.targetDiv{display:none;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#here').click(function(){
$('.targetDiv').first().show(); // or whatever you want
});
});
</script>
<div a>
<h2>
<span id="here">Click</span>
</h2>
</div>
<div></div>
<div>
<div class="targetDiv">This is the div we need to find</div>
<div class="targetDiv">There are other divs with the same id, but we don't need to find those</div>
<div class="targetDiv">Not looking for this one </div>
<div class="targetDiv">Or this one either</div>
</div>

Cycle through divs?

I have this HTML:
<div id="container">
<div class="boxes">first box</div>
<div class="boxes">second box</div>
<div class="boxes">third box</div>
</div>
Show me next box
Consider that initially only the first box is visible. When I click 'Show me next box' I want the current visible box to be hidden, and the next .boxes on the list to appear.
The only thing that I think it gets close is the .each function, but I shouldn't cycle through all divs just to show one, I think.
$('a').click(function() {
var visibleBox = $('#container .boxes:visible');
visibleBox.hide();
var nextToShow = $(visibleBox).next('.boxes:hidden');
if (nextToShow.length > 0) {
nextToShow.show();
} else {
$('#container .boxes:hidden:first').show();
}
return false;
});
Live demo.
$('a').click(function(){
$('.boxes').filter(':visible').hide().next().add('.boxes:first').last().show();
});

Categories

Resources