Is there anyway i can find the current class number?
For example: Total elements with class 'TEST' are 20. $('.TEST').length
If i click on 4th test element i should get 4.
I played with index but couldn't get it to work.
Please look the example below.
<div class="a">
<div class="b">
<div class="TEST">CLICK ON THIS.</div>
</div>
</div>
<div class="e">
<div class="f">
<div class="TEST">CLICK ON THIS.</div>
</div>
</div>
<div class="k">
<div class="t">
<div class="TEST">CLICK ON THIS.</div>
</div>
</div>
.....
Jquery
$(document).on('click','.TEST'){
.....
}
I think this is what you're looking for. Sounds like you were close.
$(function () {
$('.TEST').click(function () {
console.log($('.TEST').index(this));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">
<div class="b">
<div class="TEST">CLICK ON THIS.</div>
</div>
</div>
<div class="e">
<div class="f">
<div class="TEST">CLICK ON THIS.</div>
</div>
</div>
<div class="k">
<div class="t">
<div class="TEST">CLICK ON THIS.</div>
</div>
</div>
Note, click on fourth .TEST element should return 3, as .index() uses 0-based index
$(document).on('click', '.TEST', function(e) {
console.log($(this).index(".TEST"))
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">
<div class="b">
<div class="TEST">CLICK ON THIS.</div>
</div>
</div>
<div class="e">
<div class="f">
<div class="TEST">CLICK ON THIS.</div>
</div>
</div>
<div class="k">
<div class="t">
<div class="TEST">CLICK ON THIS.</div>
</div>
</div>
Related
I have a list of 12 posts wrapped in a div tag and the structure looks like this:
<div class="row">
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
</div>
Is there a way I can loop every third div with the class of content in another div tag?
At the end I would have my structure like this:
<div class="row">
<div class="wrapper">
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
</div>
<div class="wrapper">
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
</div>
<div class="wrapper">
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
</div>
<div class="wrapper">
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
</div>
</div>
Is there a way I can loop every third div with the class of content in another div tag?
You can do something like this
// get all element at position 1,4,7,...etc and iterate
$('.row .content:nth-child(3n + 1)').each(function() {
$(this)
// get all siblings next to it
.nextAll('.content')
// get only next 2 elements from it
.slice(0, 2)
// combine the current element with it
.add(this)
// wrap all elemnts with the div(3 divs)
.wrapAll('<div class="wrapper">')
})
$('.row .content:nth-child(3n + 1)').each(function() {
$(this).nextAll('.content').slice(0, 2).add(this).wrapAll('<div class="wrapper">')
})
console.log($('.row')[0].outerHTML)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
</div>
Or you can use jQuery :lt() pseudo-class selector to avoid slice() method.
$('.row .content:nth-child(3n + 1)').each(function() {
$(this).nextAll('.content:lt(2)').add(this).wrapAll('<div class="wrapper">')
})
$('.row .content:nth-child(3n + 1)').each(function() {
$(this).nextAll('.content:lt(2)').add(this).wrapAll('<div class="wrapper">')
})
console.log($('.row')[0].outerHTML)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
</div>
Loop through the children, every third child create a new wrapper and add each child in the respective wrapper.
var test = document.querySelector("#test");
var index = 2;
for (var child of test.querySelectorAll(".content")) {
if (index++ >= 2) {
var newWrapper = test.appendChild(document.createElement("div"));
newWrapper.className = "wrapper";
index = 0;
}
test.removeChild(child);
newWrapper.appendChild(child);
}
console.log(test.innerHTML);
<div class="row" id="test">
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
</div>
Try this
function WrapUpAllDivs(){
var CurrentDivs = $(".row",".content");
for(var i = 0; i < CurrentDivs.length -1 ; i+=3) {
CurrentDivs
.slice(i, i+3)
.wrapAll("<div class=\"wrapper\"></div>");
}
}
This question already has answers here:
jQuery find an element by its index
(7 answers)
Closed 4 years ago.
I was wondering how I could add a class to a specific object inside a list?
Let me demonstrate the question with some code.
$('.box')[5].addClass('center')
.center{
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="box">
c-1
</div>
<div class="box">
c-2
</div>
<div class="box">
c-3
</div>
<div class="box">
c-4
</div>
<div class="box">
c-5
</div>
<div class="box">
c-6
</div>
<div class="box">
c-7
</div>
<div class="box">
c-8
</div>
<div class="box">
c-9
</div>
</div>
This does not work because I get an error:
Uncaught TypeError: $(...)[5].addClass is not a function
I only want to add the class to the fifth element of the list. What can I do?
$('.box') is an object not an array. So you can not use index like that.
You can simply use eq() selector which selects the element at the specified index within the matched set:
$('.box:eq(5)').addClass('center');
.center{
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="box">
c-1
</div>
<div class="box">
c-2
</div>
<div class="box">
c-3
</div>
<div class="box">
c-4
</div>
<div class="box">
c-5
</div>
<div class="box">
c-6
</div>
<div class="box">
c-7
</div>
<div class="box">
c-8
</div>
<div class="box">
c-9
</div>
</div>
In JQuery there is something called the eq selector
Select the element at index n within the matched set.
Here is how to use it in your instance (remember counting starts at 0)
$('.box:eq( 5 )').addClass('center')
.center {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="box">
c-1
</div>
<div class="box">
c-2
</div>
<div class="box">
c-3
</div>
<div class="box">
c-4
</div>
<div class="box">
c-5
</div>
<div class="box">
c-6
</div>
<div class="box">
c-7
</div>
<div class="box">
c-8
</div>
<div class="box">
c-9
</div>
</div>
I hope you find this helpful.
I have the following html:
<div class="col-md-12">
<div class="group">
<div class="label">
<li class="interrogation">?</li>
</div>
</div>
<div class="message"></div>
</div>
<div class="col-md-12">
<div class="group">
<div class="label">
<li class="interrogation">?</li>
</div>
</div>
<div class="message"></div>
</div>
This is my ns.init function:
ns.init = function() {
$(".message").hide();
$(".interrogation").click(function(){
$(".interrogation").closest(".group").parent().find(".message").toggle();
});
}
The current code works but it toggles all the messages on the page when I click one of them. How can I make it toggle only the message that is exactly after the question mark ?
That is because you use $(".interrogation") selector in your function. This selects all elements with that class in the document. Use $(this) to only have the element that you clicked on as reference for your selector.
Here is a working fiddle:
$(function() {
$(".message").hide();
$(".interrogation").click(function(){
$(this).closest(".group").parent().find(".message").toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12">
<div class="group">
<div class="label">
<li class="interrogation">?</li>
</div>
</div>
<div class="message">Message1</div>
</div>
<div class="col-md-12">
<div class="group">
<div class="label">
<li class="interrogation">?</li>
</div>
</div>
<div class="message">Message2</div>
</div>
Here you go with a solution https://jsfiddle.net/denquhL1/1/
$('.interrogation').click(function(){
$(this).closest('div.group').next('div.message').slideToggle();
});
.message{
display: none;
}
.interrogation {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12">
<div class="group">
<div class="label">
<li class="interrogation">?</li>
</div>
</div>
<div class="message">Message 1</div>
</div>
<div class="col-md-12">
<div class="group">
<div class="label">
<li class="interrogation">?</li>
</div>
</div>
<div class="message">Message 2</div>
</div>
Onclick of .interrogation class, it will traverse to closest .group container, then it will look for next .message container.
Instead of toggle, I've used slideToggle with animation.
Hope this will help you.
Something like this?
var ns = {};
ns.init = function() {
$(".message").hide()
$(".interrogation").click(function() {
var commonParent = $(this).closest(".col-md-12");
commonParent.find(".message").toggle();
});
}
ns.init();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12">
<div class="group">
<div class="label">
<li class="interrogation">?</li>
</div>
</div>
<div class="message">Msg 1</div>
</div>
<div class="col-md-12">
<div class="group">
<div class="label">
<li class="interrogation">?</li>
</div>
</div>
<div class="message">Msg 2</div>
</div>
I'm trying to hide the outer div when a nested div is empty (including white-space node). I've found a solution that works if there is NO whitespace:
Hide parent DIV if <li> is Empty
I need it to work when there IS white space present, ie:
<div class="gen-customer">
<div class="wrapper">
<div class="heading">Hidden if working 1</div>
<div class="content">
<div class="product"> </div>
</div>
</div>
</div>
Example fiddle
Working fiddle
You could use the both :empty and :contain() selector :
$("div.product:contains(' '), div.product:empty").closest('div.wrapper').hide();
Hope this helps.
$("div.product:contains(' '), div.product:empty").closest('div.wrapper').hide()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gen-customer">
<div class="wrapper">
<div class="heading">Hidden if working 1</div>
<div class="content">
<div class="product"> </div>
</div>
</div>
</div>
<div class="gen-customer">
<div class="wrapper">
<div class="heading">Visible if working 2</div>
<div class="content">
<div class="product">text</div>
</div>
</div>
</div>
<div class="gen-customer">
<div class="wrapper">
<div class="heading">Hidden if working 3</div>
<div class="content">
<div class="product"></div>
</div>
</div>
</div>
You can iterate over each div.product and trim the text to remove whitespace. If there's anything left, show it, otherwise, hide its wrapper.
$("div.product").each(function() {
if ($(this).text().trim() == '') {
$(this).closest('div.wrapper').hide()
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gen-customer">
<div class="wrapper">
<div class="heading">Hidden if working 1</div>
<div class="content">
<div class="product"></div>
</div>
</div>
</div>
<div class="gen-customer">
<div class="wrapper">
<div class="heading">Visible if working 2</div>
<div class="content">
<div class="product">text</div>
</div>
</div>
</div>
<div class="gen-customer">
<div class="wrapper">
<div class="heading">Hidden if working 3</div>
<div class="content">
<div class="product"></div>
</div>
</div>
</div>
//Try this using Jquery
<script>
//A perfect reference in Jquery...
var element=$('#target_child');
if($(element).html()==''){
$(element).parent().hide()
}else{
//do some work
}
</script>
I have a following html as follows:
<div class="outerdiv">
<div class="title">
<div class="innerdiv">
<div class="outerdiv">
<div class="title">
<div class="innerdiv">
<div class="outerdiv">
<div class="innerdiv>
<div class="outerdiv">
<div class="title">
<div class="innerdiv">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I have to apply "border-width:10px" for all divs with class = innerdiv provided that "outerdiv" contains both "title" and "innerdiv"
.
My expected output is:
<div class="outerdiv">
<div class="title">
<div class="innerdiv" style="border-width:10px">
<div class="outerdiv">
<div class="title">
<div class="innerdiv" style="border-width:10px">
<div class="outerdiv">
<div class="innerdiv>
<div class="outerdiv">
<div class="title">
<div class="innerdiv" style="border-width:10px">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I am trying this:
$(element).find(".outerdiv").not("[class="title"]).css("border-width","10px").
Edit: The number of divs are dynamic and not fixed in number
You need to use :has selector along with immediate child selector to target innerdiv element:
$('.outerdiv:has(.innerdiv):has(.title) > ,.title > .innerdiv ').css("border-width","10px");
DEMO SNIPPET :
$(function(){
$('.outerdiv:has(.innerdiv):has(.title) > .title > .innerdiv ').css("border-width","100px").css('border' ,'1px solid grey')
}) ;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="outerdiv">
<div class="title">1
<div class="innerdiv">2
<div class="outerdiv">3
<div class="title">4
<div class="innerdiv">5
<div class="outerdiv">6
<div class="innerdiv">7
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You can do this with good css hierarchy just apply the styles to
.outerdiv > .title > .innerdiv{
css goes here
}
and they will only affect divs in the hierarchy that you mentioned.
Simply use:
$('.innerdiv').css('border-width','10px');
It will add border-width to all divs with class 'innerdiv'.