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>
Related
I have a list of div with the same class. Each div contains other divs, .header, .body, .footer. When I hover on one of the elements inside one div, for example .header, I need to add/remove a class on the another .footer element inside the same div.
The problem is when I hover one .header - I'm adding class to all .footer elements inside all other div's but I need to add new class only to the .footer inside the current div.
$(document).ready(function() {
$('.header').hover(function() {
$('.footer').addClass('active');
}, function() {
$('.footer').removeClass('active');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list">
<div class="list_item">
<div class="header"></div>
<div class="body"></div>
<div class="footer"></div>
</div>
<div class="list_item">
<div class="header"></div>
<div class="body"></div>
<div class="footer"></div>
</div>
<div class="list_item">
<div class="header"></div>
<div class="body"></div>
<div class="footer"></div>
</div>
</div>
You could use the :hover pseudo in CSS and the general sibling combinator selector ~
.list_item:hover .header:hover ~ .footer {
background: red;
}
<div class="list">
<div class="list_item">
<div class="header">Hover me</div>
<div class="body">B</div>
<div class="footer">F</div>
</div>
<div class="list_item">
<div class="header">Hover me</div>
<div class="body">B</div>
<div class="footer">F</div>
</div>
<div class="list_item">
<div class="header">Hover me</div>
<div class="body">B</div>
<div class="footer">F</div>
</div>
</div>
otherwise, if you cannot rely on .footer being a next sibling - use jQuery
jQuery(function($) {
$('.header').hover(function() {
$(this).closest('.list_item').find('.footer').toggleClass('active');
});
});
.active {
background: red;
}
<div class="list">
<div class="list_item">
<div class="header">Hover me</div>
<div class="body">B</div>
<div class="footer">F</div>
</div>
<div class="list_item">
<div class="header">Hover me</div>
<div class="body">B</div>
<div class="footer">F</div>
</div>
<div class="list_item">
<div class="header">Hover me</div>
<div class="body">B</div>
<div class="footer">F</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
You should be doing it relative to this (which is the current hovered header) and you can use nextAll if that is the only footer in the grouping:
$('.header').hover(function() {
$(this).nextAll('.footer').addClass('active');
},
function() {
$(this).nextAll('.footer').removeClass('active');
});
.active {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list">
<div class="list_item">
<div class="header"> header </div>
<div class="body"> body </div>
<div class="footer"> footer </div>
</div>
<div class="list_item">
<div class="header"> header </div>
<div class="body"> body </div>
<div class="footer"> footer </div>
</div>
<div class="list_item">
<div class="header"> header </div>
<div class="body"> body </div>
<div class="footer"> footer </div>
</div>
</div>
Yes can try below code snippet, I have tested it already.
$(document).ready(function() {
$('.header').hover(function(){
$(this).siblings(".footer").addClass('active');
},
function(){
$(this).siblings(".footer").removeClass('active');
});
});
You need to add different ID property all some div, get $('#footer3') and change it
i`m trying to remove all .col-md-1 class from all child element in particular div.
<div id="question123">
<div class="panel-title">
....
</div>
<div class="panel-body">
<div class="answer clearfix">
<h3> ... </h3>
<div class="answer clearfix">
<ul class"question-list">
<div class="row">
<div class = "col-md-1">
<li class="question-item" id="javatbd74656737">
<div class="checkbox">...</div>
</li>
</div>
<div class = "col-md-1">
<li class="question-item" id="javatbd74656737">
<div class="checkbox">...</div>
</li>
</div>
<div class = "col-md-1">
<li class="question-item" id="javatbd74656737">
<div class="checkbox">...</div>
</li>
</div>
</div>
</ul>
</div>
</div>
</div>
</div>
i now its deeply nested, but that is what i got from a dynamically generated html. i have to somehow access this particular question div. and delete the .col-md-1 from all the child div.
thanks for help !
you can use jQuery removeClass() function for this..
$('.question-list .col-md-1').removeClass('col-md-1');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="question123">
<div class="panel-title">
....
</div>
<div class="panel-body">
<div class="answer clearfix">
<h3> ... </h3>
<div class="answer clearfix">
<ul class"question-list">
<div class="row">
<div class = "col-md-1">
....
</div>
<div class = "col-md-1">
....
</div>
<div class = "col-md-1">
....
</div>
</div>
</ul>
</div>
</div>
</div>
</div>
You can use the the find() and removeClass methods for that.
$('#parentElement').find('.col-md-1').removeClass('col-md-1');
Get all the elements inside your #question123 and your .question-list and use removeClass for removing the class
$('#question123 .question-list .col-md-1').removeClass('col-md-1');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="question123">
<div class="panel-title">
....
</div>
<div class="panel-body">
<div class="answer clearfix">
<h3> ... </h3>
<div class="answer clearfix">
<ul class="question-list">
<div class="row">
<div class = "col-md-1">
....
</div>
<div class = "col-md-1">
....
</div>
<div class = "col-md-1">
....
</div>
</div>
</ul>
</div>
</div>
</div>
</div>
For a non-jQuery approach - you can get all the divs with that class using querySelectorAll and then remove the class.
var elements= document.querySelectorAll('.question-list .col-md-1');
elements.forEach(function(el){
el.classList.remove('col-md-1');
})
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>
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>
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'.