I have a body with ID body and inside it a div with class nav-container. I want to remove certain classes when users click on the #body, but not .nav-container (it's an overlay type of menu).
Tried below code
HTML:
<body id="body">
<div class="nav-container">
X
<nav class="display">
<ul>
<li> One </li>
<li> Two </li>
<li> Three </li>
</ul>
</nav>
</div>
</body>
jQuery
$('#body :not(.nav-container)').click(function() {
$('.cover').removeClass('active-cover');
$('.nav-container').removeClass('active');
});
It does not seem to be working for me though.
It wont work as not exclude the selected elements which pass the earlier css-selector criteria since .nav-container is not part of list that is selected by #body (wont be list in this case as its ID), so you wont be able to exclude that.
So basically what you need is
$(document).on("click", "div:not('.nav-container')",function() {
$('.cover').removeClass('active-cover');
$('.nav-container').removeClass('active');
});
the first element shouldn't be the parent, like #body, rather the element. for example div:not('example') works for every div except example.
$("div:not(.nav-container)").click(function() {
alert("nav-container was not clicked");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body id="body">
<div class="nav-container">
X
<nav class="display">
<ul>
<li> One </li>
<li> Two </li>
<li> Three </li>
</ul>
</nav>
</div>
<br />
<div>click here </div>
</body>
Related
I would like to clone an element inside a div and append it to another div without any click event, on page load. This is my code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="hs-search-results__listing">
<li>
Search Title
<p class="more-link-container">
</p>
</li>
<li>
Search Title
<p class="more-link-container">
</p>
</li>
</ul>
<script>
$('.hs-search-results__listing li').each(function(){
$(this).find('.hs-search-results__title').clone().appendTo(".more-link-container");
});
</script>
I am trying the above but it is not working.
In each iteration you are appending to all the elements with class more-link-container available in the DOM. You should append the element only to the relevant p element.
Change
.appendTo(".more-link-container")
To
.appendTo($(this).find(".more-link-container"))
$('.hs-search-results__listing li').each(function(){
$(this).find('.hs-search-results__title').clone().appendTo($(this).find(".more-link-container"));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="hs-search-results__listing">
<li>
Search Title
<p class="more-link-container">
</p>
</li>
<li>
Search Title
<p class="more-link-container">
</p>
</li>
</ul>
I have the following code:
<div id="myDiv">
<ul>
<li> Thing 1
<li> Thing 2
</ul>
</div>
I want to be able to add one new item to the list, which is unidentified.
If I do:
var x = $('#myDiv').has('ul')
I am actually referring to the correct div, but I want to refer to the ul itself so I can do an .append().
What is the correct way of doing this?
Thank you for your help!
You can point to ul like this
$('#myDiv ul')
$('#myDiv ul').append('<li>Item to append</li>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDiv">
<ul>
<li> Thing 1
<li> Thing 2
</ul>
</div>
You can refer <ul> directly:-
$('ul').append('<li>Item 3 appended</li>');
Working snippet:-
$('ul').append('<li>Item 3 appended</li>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDiv">
<ul>
<li> Thing 1
<li> Thing 2
</ul>
</div>
Note:- It will add <li> to all <ul>'s if multiple are present.
So if you want to append to specific <ul> take a reference to its parent
$('#myDiv ul').append('<li>Item 3 appended</li>');
Working snippet:-
$('#myDiv ul').append('<li>Item 3 appended</li>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDiv">
<ul>
<li> Thing 1
<li> Thing 2
</ul>
</div>
<li>
<div id="lineop1"><h3>Softshell</h3></div>
</li>
<li>
<div id="lineop1"><h3>Option</h3></div>
</li>
<li>
<div id="lineop1"><h3>Option 1</h3></div>
</li>
I need to show which one h3 tag is clicked to show active
You need to do it like below:-
$(document).ready(function(){
$('.lineop1 a h3').click(function(e){
e.preventDefault(); // to prevent page refresh with new url
$('h3').removeClass('active'); // remove active class from other h3 tag
$(this).addClass('active'); // add active class to current clicked tag
});
});
.active{
color:green;
font-size:20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>
<div class="lineop1"><h3>Softshell</h3></div>
</li>
<li>
<div class="lineop1"><h3>Option</h3></div>
</li>
<li>
<div class="lineop1"><h3>Option 1</h3></div>
</li>
Note:- id need to be unique per element. so convert id to class around <div's>
And if you want that after click on h3 when page refresh, then also the corresponding h3 tag have the active class, then you have to use localstorage concept like below:-
jQuery:-
$(document).ready(function(){
$('ul li').eq( localStorage.parent ).find('h3').addClass('active');
$('.lineop1 a h3').click(function(e){
var pagename = $(location).attr("href").split('/').pop();
localStorage.parent=$(this).closest('li').index();
});
});
Html:-
<ul>
<li>
<div class="lineop1"><h3>Softshell</h3></div>
</li>
<li>
<div class="lineop1"><h3>Option</h3></div>
</li>
<li>
<div class="lineop1"><h3>Option 1</h3></div>
</li>
</ul>
I have tested it on localhost at my end and working perfectly fine.
add a click handler to h3. Add class active to it.
$(document).ready(function(){
$(document).on('click','h3',function(){
$('h3').removeClass('active');
$(this).addClass('active');
});
});
.active{
color:#ff00eb;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<li>
<div id="lineop1"><h3>Softshell</h3></div>
</li>
<li>
<div id="lineop1"><h3>Option</h3></div>
</li>
<li>
<div id="lineop1"><h3>Option 1</h3></div>
</li>
Edit: its always good practice to attach click event to the closest unique parent element. so I have included $(document).On.
Follow this link to see working of Direct Vs Deletegated Events
I need to add a class to the closest div with a given id after I click the div above it. My example below should make more sense of what I need.
<style>
.menuContent {display:none;}
.expandMenu {display:inherit;}
</style>
<ul>
<li>
<div class="menuIcon" onclick="expandMenu('menuContent');">+</div>
<div id="menuContent" class="menuContent">
<p>This</p>
<p>That</p>
<p>The Other</p>
</div>
</li>
<li>
<div class="menuIcon" onclick="expandMenu('menuContent');">+</div>
<div id="menuContent" class="menuContent">
<p>This</p>
<p>That</p>
<p>The Other</p>
</div>
</li>
</ul>
This is the script I have so far that searches the class names of the given element and adds or removes the 'expandMenu' class when clicked.
<script>
function expandMenu(x) {
var d = document.getElementById(x);
var c = d.className;
if (c.search("expandMenu") === -1) {
d.className += " expandMenu";
} else {
d.className = c.replace(" expandMenu","");
}
}
</script>
This is all working fine, the issue is when clicking the 'menuIcon' in the second 'li', it's the first 'li' element that the script is applied too - it's obviously just finding the first 'menuContent' and applying the className function to it.
How can I limit the function to only apply to the 'menuContent' div that is directly after it.
I don't want to use jQuery either - good ol' fashioned plain Javascript would be great.
Give the menu icons unique ids, and pass that id to the function. Toggle based on the id, instead of the class. You are right, it is choosing the first one because it has found it when running through the code.
You should not have the same id on multiple elements. Try changing one of the id's and passing the new id to the function.
<style>
.menuContent {display:none;}
.expandMenu {display:inherit;}
</style>
<ul>
<li>
<div class="menuIcon" onclick="expandMenu('menuContent1');">+</div>
<div id="menuContent1" class="menuContent">
<p>This</p>
<p>That</p>
<p>The Other</p>
</div>
</li>
<li>
<div class="menuIcon" onclick="expandMenu('menuContent2');">+</div>
<div id="menuContent2" class="menuContent">
<p>This</p>
<p>That</p>
<p>The Other</p>
</div>
</li>
</ul>
I have inside my html code repeating elements like this:
<li>
<a class="synth-faq-trigger" href="#0">Link</a>
<div class="synth-faq-content">
<p class="filler">Text</p>
</div> <!-- synth-faq-content -->
</li>
and I use the following command so I can toggle the class 'content-visible' that will make this element slide to reveal the contents of <p>, in this case Text.
What I am trying to do is before doing this in my code, find the previous element that had a class of 'content-visible' and toggle it, so only one element remains visible at all times.
$(this).next('.synth-faq-content').slideToggle(200).end().parent('li').toggleClass('content-visible');
I tried various things lastly being
$(this).closest('synth-faq-trigger').next().find('.synth-faq-content').toggleClass('content-visible');
that has no effect at all. Moreover the suggestions from w3school on finding an element by class failed all together.
How can I make sure that I find all my items containing 'content-visible' and I remove this class from them?
I notice you are already using hash links in your example code, and because of this, you can achieve what you are trying without any JavaScript. Browsers already have functionality to handle displaying elements depending on the hash target, so let's exploit this browser feature rather than implementing it again in JavaScript.
Live demo: http://jsfiddle.net/g105b/cj5fscah/
The href of the anchor is to a hash link, which will be put into the URL bar of the browser. Each li element has an ID that corresponds to the hash targets, and using the :target CSS selector, you can style elements differently depending on what the hash is.
With some fancy CSS you can add animations too, that will perform much better than any JavaScript can.
<ul>
<li id="0">
<a class="synth-faq-trigger" href="#0">Link</a>
<div class="synth-faq-content">
<p class="filler">Text for one</p>
</div> <!-- synth-faq-content -->
</li>
<li id="1">
<a class="synth-faq-trigger" href="#1">Link</a>
<div class="synth-faq-content">
<p class="filler">Text for two</p>
</div> <!-- synth-faq-content -->
</li>
<li id="2">
<a class="synth-faq-trigger" href="#2">Link</a>
<div class="synth-faq-content">
<p class="filler">Text for three</p>
</div> <!-- synth-faq-content -->
</li>
</ul>
ul {
width: 320px;
}
li {
background: #aaf;
}
.synth-faq-content {
overflow: hidden;
height: 0;
transition: height 200ms ease-in-out;
}
li:target .synth-faq-content {
height: 3em;
}
Edit: if you still need to manipulate the class names, a simple piece of JavaScript can trigger when the hash changes to accomplish having a class added to the correct LI element.
window.addEventListener("hashchange", function(e) {
// Remove all .content-visible elements:
[].forEach.call(document.querySelectorAll(".content-visible"), function(li) {
li.classList.remove("content-visible");
});
// Add .content-visible to the li that contains the clicked anchor:
document.querySelector("a[href='" + location.hash + "']").parentElement.classList.add("content-visible");
});
Updated demo: http://jsfiddle.net/g105b/cj5fscah/1/
You can use the sibling relation like
$('a').click(function() {
var $li = $(this).next('.synth-faq-content').slideToggle(200).closest('li').toggleClass('content-visible');
$('li.content-visible').not($li).removeClass('content-visible').find('.synth-faq-content').slideUp();
})
.content-visible > a {
color: green;
}
.synth-faq-content {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li>
<a class="synth-faq-trigger" href="#0">Link</a>
<div class="synth-faq-content">
<p class="filler">Text</p>
</div>
<!-- synth-faq-content -->
</li>
<li>
<a class="synth-faq-trigger" href="#0">Link</a>
<div class="synth-faq-content">
<p class="filler">Text</p>
</div>
<!-- synth-faq-content -->
</li>
<li>
<a class="synth-faq-trigger" href="#0">Link</a>
<div class="synth-faq-content">
<p class="filler">Text</p>
</div>
<!-- synth-faq-content -->
</li>
</ul>