How to find the index position of the element of specific parent - javascript

I want to find the index .col in .row
When I click on .option it should give me the position of .col in .row
<div class=“row”>
<div class=“col”>
<div class=“option”>click (return 0)</div>
</div>
</div>
<div class=“row”>
<div class=“col”>
<div class=“option”>click 2 (return 1)</div>
</div>
</div>
Can anyone tell me how?

Put a click listener for it
$('.option').click(function (event) {
alert($(this).index()); // the index was $(this).index()
});

<div class=“row”>
<div class=“col”>
<div class=“option” onclick="myFunction(0)">click (return 0)</div>
</div>
</div>
<div class=“row”>
<div class=“col”>
<div class=“option” onclick="myFunction(1)">click 2 (return 1)</div>
</div>
</div>

Related

Stop function on first or/and last item

I have the following function:
// Go to the previous item
$(".owl-prev-custom").click(function () {
$(".owl-carousel-timeline .item.item-year-active")
.removeClass("item-year-active")
.parent()
.prev()
.children()
.addClass("item-year-active");
var theHash = $(".owl-carousel-timeline .item.item-year-active").attr(
"data-hash"
);
});
With this html:
<div class="owl-carousel owl-carousel-timeline">
<div class="owl-item">
<div class="item" data-hash="2006">
<div class="carousel-card"></div>
</div>
</div>
<div class="owl-item">
<div class="item" data-hash="2009">
<div class="carousel-card"></div>
</div>
</div>
<div class="owl-item">
<div class="item" data-hash="2010">
<div class="carousel-card"></div>
</div>
</div>
<div class="owl-item">
<div class="item" data-hash="2013">
<div class="carousel-card"></div>
</div>
</div>
<div class="owl-item">
<div class="item item-year-active" data-hash="2013-2">
<div class="carousel-card"></div>
</div>
</div>
</div>
<div class="owl-nav owl-nav-timeline">
<div class="owl-prev-custom"></div>
<div class="owl-next-custom"></div>
</div>
The problem I have is that the click event, when reaches the first item .owl-item:first (or last item .owl-item:last), does not stop and the class .item-year-active disappears since it goes to an item before the first owl-item.
I would like to know how to stop my function in the first .owl-item and in the last .owl-item so that this does not happen.
Please let me know if I explain well, to give more details, English is not my primary language :)
Check whether the active element is the first element, and skip it when you reach the end.
// Go to the previous item
$(".owl-prev-custom").click(function() {
if (!$(".owl-carousel-timeline .item.item-year-active").is(".owl-carousel-timeline .item:first")) {
$(".owl-carousel-timeline .item.item-year-active")
.removeClass("item-year-active")
.parent()
.prev()
.children()
.addClass("item-year-active");
}
var theHash = $(".owl-carousel-timeline .item.item-year-active").attr(
"data-hash"
);
});

Hide specific elements using jQuery and JavaScript

We have issues with our code:
function remove_single_entry_if_empty() {
$(".single-entry").each(function() {
var ids = $(this).attr('id');
let a = (ids);
for ( let i = 0; i < a.length; a++ ) {
let x = document.getElementById(a);
if ( x.getElementsByClassName('entry_times-wrapper').length === 1 ) {
var c = x.getElementsByClassName('entry_times-wrapper').length === 1;
x.style.display = 'none';
}
}
});
}
HTML Structure:
<div class="single-entry" id="9127">
<div class="entries_wrapper">
<div class="entry_times-wrapper">
<!-- this is where the <a> tags is. -->
</div>
</div>
</div>
We have an HTML tag with the class single-entry. This class exist multiple times but each with a unique ID specified. The class name called entry_times-wrapper (which is a child element of variable X) has also multiple <a> tags.
What we want to do: if all items in class entry_times-wrapper are hidden (with display none), then hide the single-entry class for only that specific ID. For now, this code as described above will actually hide all these single entries.
How can we do this correctly?
To achieve this you can use a single line of jQuery which selects all the .single-entry elements which contain a hidden .entry_times-wrapper and then hide them. Try this:
$('.single-entry:has(.entry_times-wrapper:hidden)').hide();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="single-entry" id="9127">
<div class="entries_wrapper">
<div class="entry_times-wrapper">
Visible...
</div>
</div>
</div>
<div class="single-entry" id="9128">
<div class="entries_wrapper">
<div class="entry_times-wrapper">
Not visible...
</div>
</div>
</div>
<div class="single-entry" id="9120">
<div class="entries_wrapper">
<div class="entry_times-wrapper">
Visible...
</div>
</div>
</div>
Here is a working demo with several <div>s and <a>s:
$("button").click(function(){ $(".single-entry").add("a").show();});
$(".entry_times-wrapper a").click(function(){ $(this).hide();checkVis();})
// this needs to be called every time an <a> element is hidden or made visible again:
function checkVis(){
$(".single-entry").each(function(){
$(this).toggle($(".entry_times-wrapper a:visible",this).length>0)
});
}
.single-entry {background-color:#ccc; padding:6px;
border: 1px black solid; margin: 4px}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>show all links again</button><br>
<div class="single-entry" id="9127">
<div class="entries_wrapper">
<div class="entry_times-wrapper">
first link<br>
second link<br>
third link
</div>
</div>
</div>
<div class="single-entry" id="9128">
<div class="entries_wrapper">
<div class="entry_times-wrapper">
fourth link<br>
fifth link<br>
sixth link
</div>
</div>
</div>
<div class="single-entry" id="9129">
<div class="entries_wrapper">
<div class="entry_times-wrapper">
seventh link<br>
eighth link<br>
ninth link
</div>
</div>
</div>

jQuery .next() div showing all siblings instead of just one

I'm testing a pagination type where the buttons are on a separate div from the target.
When I try to toggle the next div of the body, all of them are toggling, instead of just one.
$('#next_q').on('click', function(){
$('.question-item').hide().next('.question-item').show();
})
.question-item:not(:first-child){display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box-body">
<div class="question-item">Q1</div>
<div class="question-item">Q2</div>
<div class="question-item">Q3</div>
</div>
<div class="box-footer">
<button>Prev</button>
<button id="next_q">Next</button>
</div>
use :visible to select the question-item that is currently visible
$('#next_q').on('click', function(){
$('.question-item:visible').hide().next('.question-item').show();
})
also if you want it not to "skip" past the last element, use
if ($('.question-item:visible').prev('.question-item').length)
$('#next_q').on('click', function() {
if ($('.question-item:visible').next('.question-item').length)
$('.question-item:visible').hide().next('.question-item').show();
})
$('#prev_q').on('click', function() {
if ($('.question-item:visible').prev('.question-item').length)
$('.question-item:visible').hide().prev('.question-item').show();
})
.question-item:not(:first-child) {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box-body">
<div class="question-item">Q1</div>
<div class="question-item">Q2</div>
<div class="question-item">Q3</div>
</div>
<div class="box-footer">
<button id="prev_q">Prev</button>
<button id="next_q">Next</button>
</div>
You can use .data() to store an integer reflecting an index of the .question-item elements .length, use ++ and % operators to cycle the indexes passed to .eq() from current index or 0 through .question-items .length
$('#next_q')
.data({
"index": 0,
items: $(".question-item")
})
.on("click", function() {
$(this).data().items
.hide()
.eq(++$(this).data().index % $(this).data().items.length)
.show();
})
.question-item:not(:first-child) {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div class="box-body">
<div class="question-item">Q1</div>
<div class="question-item">Q2</div>
<div class="question-item">Q3</div>
</div>
<div class="box-footer">
<button>Prev</button>
<button id="next_q">Next</button>
</div>
Check the current visible .question-item and hide it and then show the next .question-item. I also added the not last-child selector since I thought that you might want to stop at the last question.
$('#next_q').on('click', function(){
$('.question-item:visible:not(:last-child)').hide().next('.question-item').show();
});
$('#prev_q').on('click', function(){
$('.question-item:visible:not(:first-child)').hide().prev('.question-item').show();
});
.question-item:not(:first-child){display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box-body">
<div class="question-item">Q1</div>
<div class="question-item">Q2</div>
<div class="question-item">Q3</div>
</div>
<div class="box-footer">
<button id="prev_q">Prev</button>
<button id="next_q">Next</button>
</div>

Hiding an element through DOM traversal

What if it has few parents? (as in grandparents, great grandparents)
<div class="lvl1">
<div class="lvl1.1">
<div class="lvl1.2">
<button class="btn-submit">Click Me</button>
<div class="a1">Hello
<div>
</div>
</div>
<div class="lvl2">
<div class="b1">
<div class="b2">Make me disappear!</div>
</div>
</div>
<div class="lvl3">
<div class="c1">Thank you.
</div>
</div>
JS
$(function(){
$(".btn-submit").click(function() {
$(this).parent(".lvl1").siblings(".lvl2").children(".b2").hide();
});
});
How to use .parent, .parents, .siblings, .children, .next, .prev to show and hide the div?
If I assume that you have that structure repeated and want to remove the one in the same copy as the .btn_submit that was clicked, we go up to the .lvl1 via closest, over to the .lvl2 via .nextAll().first() (or we could just use .next), and then .find the .b2 in there:
$(".btn-submit").click(function() {
$(this).closest(".lvl1").nextAll(".lvl2").first().find(".b2").hide();
});
Your code is very close, just two things that I had to change:
Instead of using .siblings(".lvl2"), which will find all of them, I used .nextAll(".lvl2").first() to just find the one immediately after "this" .lvl1.
I used find instead of children, because children will only go down one level (direct child), not search descendants
I also used closest(".lvl1") so that if you move the .btn_submit deeper into .lvl1, it will continue working.
Live Example:
$(function() {
$(".btn-submit").click(function() {
$(this)
.closest(".lvl1")
.nextAll(".lvl2")
.first()
.find(".b2")
.hide();
});
});
<div class="lvl1">
<button class="btn-submit">Click Me</button>
<div class="a1">Hello
</div>
</div>
<div class="lvl2">
<div class="b1">
<div class="b2">Make me disappear!</div>
</div>
</div>
<div class="lvl3">
<div class="c1">Thank you.
</div>
</div>
<div class="lvl1">
<button class="btn-submit">Click Me</button>
<div class="a1">Hello
</div>
</div>
<div class="lvl2">
<div class="b1">
<div class="b2">Make me disappear!</div>
</div>
</div>
<div class="lvl3">
<div class="c1">Thank you.
</div>
</div>
<div class="lvl1">
<button class="btn-submit">Click Me</button>
<div class="a1">Hello
</div>
</div>
<div class="lvl2">
<div class="b1">
<div class="b2">Make me disappear!</div>
</div>
</div>
<div class="lvl3">
<div class="c1">Thank you.
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
there is possible to disappear div directly using,
$(".b2").hide();
but if you want to use ".parent, .parents, .siblings, .children, .next, .prev",
$(".btn-submit").parent().siblings(".lvl2").children().children(".b2").hide();
need to you children() Two times... because .b2 is not directly child to .lvl2,
another best way to hide ".b2" is,
$(".btn-submit").parent().siblings(".lvl2").find(".b2").hide();
so your Ans is:
$(".btn-submit").click(function() {
$(".btn-submit").parent().siblings(".lvl2").find(".b2").hide();
});
.children selects the children and not descendants of the element. You just need to replace the .children with the .find method and your code will select the target element.

How i can select specific div from multiple divs in jquery

I have something like this, and i need to show every div called "plink" just in the main div of each parent, so i tried to fadeIn ".plink" but its doing the same function for all the divs of "plink"
<script>
$(document).ready(function(){
$('.plink').hide();
$('.project').mouseover(function(){
$(this).next('.plink').fadeIn(400);
});
$('.project').mouseleave(function(){
$(this).next('.plink').fadeOut(200);
});
});
</script>
<div class="project">
<div class="plink">
<div class="go"></div>
<div class="goplus"><img src="images/more.png" border="0"/></div>
</div>
<div class="pic"><img src="images/portfolio_pic2.png" border="0" alt="projectname"/></div>
<div class="title">Test1</div>
</div>
<div class="spacer_project"></div>
<div class="project">
<div class="plink">
<div class="go"></div>
<div class="goplus"><img src="images/more.png" border="0"/></div>
</div>
<div class="pic"><img src="images/portfolio_pic.png" border="0" alt="projectname"/></div>
<div class="title">test2</div>
</div>
You can use find() instead of next()...
$(this).find('.plink').fadeIn(400);
because this is your .project div then you need to "find" the child elements that you are looking for. Using next() means you will get the very next element if it matches the selector (i.e. it is check to see if the next .project div matches the .plink selector)
I would go the FIND route like musefan suggested. Here is the solution code:
http://jsfiddle.net/bx7YC/
<div class="project">
<div class="plink">
<div class="go">go</div>
<div class="goplus">goplus</div>
</div>
<div class="pic">pic</div>
<div class="title">Test1</div>
</div>
<div class="spacer_project"></div>
<div class="project">
<div class="plink">
<div class="go">go</div>
<div class="goplus">goplus</div>
</div>
<div class="pic">pic</div>
<div class="title">Test2</div>
</div>​
$('.plink').hide();
$('.project').mouseover(function(){
$(this).find('.plink').fadeIn(400);
});
$('.project').mouseleave(function(){
$(this).find('.plink').fadeOut(200);
});​
I replaced the broken img links with simple text for the jsfiddle.

Categories