Trying to delete specific Node of HTML.
First HTML:
There many List in .widget-content want to delete all .list without First Li. Means keep first-child.
<div class="wrapper delete">
<div class="widget-content">
<ul>
<li class="lists">
Content
</li>
<li class="lists"> <!-- Delete this-->
Content
</li>
<li class="lists"> <!-- Delete this-->
Content
</li>
</ul>
</div>
</div>
Second HTML:
Want to delete ul of .widget-content ul if .wrapper has class delete. Condition need.
<div class="wrapper delete">
<div class="widget-content">
<ul> <!-- Delete This -->
<li class="lists">
Content
</li>
<li class="lists">
Content
</li>
<li class="lists">
Content
</li>
</ul>
</div>
</div>
How to do this by JS/jquery? Fiddle example would be helpful.
$(document).ready(function () {
$('.widget-content li').not(':first-child').remove();
if ($(".wrapper").hasClass('delete')) {
$('.widget-content ul').remove();
}
});
slice can be used to select elements with a start and end.
$('.widget-content li.lists').slice(1).remove();
$('.wrapper.delete ul').remove();
Related
I have a website where I installed SlickNav. I have it calling properly, and the linking works properly, however it doesn't seem to want to initialize in the site itself. I'm calling it via the following:
<link rel="stylesheet" href="/wp-content/themes/mta360/dist/styles/slicknav.css" />
<script src="/wp-content/themes/mta360/dist/scripts/slicknav.js"></script>
The menu code is as follows:
<header>
<!-- Header Start -->
<div class="header-area">
<div class="main-header ">
<div class="header-top top-bg d-none d-lg-block">
<div class="container">
<div class="col-xl-12">
<div class="row d-flex justify-content-between align-items-center">
<div class="header-info-left">
<ul>
<li>1234567890</li>
<li>mta360seo#gmail.com</li>
</ul>
</div>
<div class="header-info-right">
<ul>
<li>Mon - Fri: 9:00 - 5:00</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="header-bottom header-sticky">
<div class="container">
<div class="row align-items-center">
<!-- Logo -->
<div class="col-xl-2 col-lg-1 col-md-1">
<div class="logo">
<img src="/logo.png" alt="">
</div>
</div>
<div class="col-xl-8 col-lg-8 col-md-8">
<!-- Main-menu -->
<div class="main-menu f-right d-none d-lg-block">
<nav>
<ul id="navigation">
<li>Home</li>
<li>About</li>
<li>Heating</li>
<li>Cooling</li>
<li>Press
<ul class="submenu">
<li>Blog</li>
<li>Releases</li>
</ul>
</li>
<li>Company
<ul class="submenu">
<li>Contact</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
<div class="col-xl-2 col-lg-3 col-md-3">
<!-- Header-btn -->
<div class="header-btn d-none d-lg-block">
Quote
</div>
</div>
<!-- Mobile Menu -->
<div class="col-12">
<div class="mobile_menu d-block d-lg-none"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Header End -->
Is there something I'm missing? It works for my local testing, but when I compile and try to use it on the actual site, it just doesn't want to initialize at all. Is there something I'm missing?
It's a wordpress site using Sage 9, in case that helps with the diagnosis.
You have to initialize it using Javascript code.
The 2 first libraries you are calling are the CSS slicknav library and the JS slicknav library. You also need to load jQuery for slicknav to work.
So add this to your code at the beginning:
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
$(document).ready(function(){
$('#menu').slicknav({
// Label for menu button.
// Use an empty string for no label.
'label' : 'MENU',
// If true, the mobile menu is a copy of the original.
'duplicate': true,
// The duration of the sliding animation.
'duration': true,
// other parameters see here: https://www.jqueryscript.net/menu/Creating-A-Responsive-Mobile-Navigation-Menu-with-slicknav-jQuery-Plugin.html //
});
});
also you need to specify an ID "menu" to the <ul> element like this:
<ul id="menu">
<li>...</li>
</ul>
Finally, make sure your HTML markup follows the specified structure for slick nav which is:
<ul id="menu">
<li>Home
<ul>
<li>Blog</li>
<li>Plugins
<ul>
<li>Latest</li>
<li>Most Popular</li>
<li>Recommended</li>
</ul>
</li>
<li>Publishing</li>
</ul>
</li>
<li>Top <a href="#">Menu 2</a></li>
<li>Top Menu 3</li>
<li>Top Menu 4
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</li>
</ul>
more here: https://www.jqueryscript.net/menu/Creating-A-Responsive-Mobile-Navigation-Menu-with-slicknav-jQuery-Plugin.html
Looking for option in js/css to select (n) <li> in my code, but i need to have indicate that <li> have parent with current <a> with specyfic indicated href link.
CATEGORY NAME
<div class="123">
<div class="categories ">
<span>Categories:</span>
<ul>
<li>
1
</li>
<li>
2 this is what i need to select
</li>
</ul>
</div>
</div>
Many thanks for respound!
Cheers!
Try:
li a[href='https://someweb.com/']:eq(1)
$("li a[href='https://someweb.com/']:eq(1)").css("background","red");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li>
1
</li>
<li>
2 this is what i need to select
</li>
<li>
3
</li>
You want to select that specific URL?
a[href='https://specificWeb.com/']{
background: red;
}
CATEGORY NAME
<div class="123">
<div class="categories ">
<span>Categories:</span>
<ul>
<li>
1
</li>
<li>
2 this is what i need to select
</li>
</ul>
</div>
</div>
But i think a better solution will be by using classes:
.my-target-url {
background: red;
}
CATEGORY NAME
<div class="123">
<div class="categories ">
<span>Categories:</span>
<ul>
<li>
1
</li>
<li>
<a class="my-target-url"href="https://specificWeb.com/"> 2 this is what i need to select </a>
</li>
</ul>
</div>
</div>
And if urls are not hardcoded, add a logic that toggles the class
I'm working on this portfolio site of mine
http://miketest.best/
and the top right hamburger .toggleClass() doesn't fire immediately on every click. Seems to work but there's some weird delay sometimes that doesn't make it fire/toggle immediately upon each click (if at all)?
If useful this is Wordpress and using it on my custom theme.
jQuery(document).ready(function($) {
$('.cls').click(function(){
console.log('fire');
$('.open').toggleClass('oppenned');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="open">
<span class="cls"></span>
<span>
<ul class="sub-menu ">
<li onclick="slideTo('slide-2')">HOME
</li>
<li onclick="slideTo('slide-0')">ABOUT
</li>
<li onclick="slideTo('slide-1')">SERVICES
</li>
<li onclick="slideTo('slide-3')">PORTFOLIO
</li>
<li onclick="slideTo('slide-4')">CONTACT
</li>
</ul>
</span>
<span class="cls"></span>
</div>
Your trigger class is .cls,but in your DOM you have don't give any visible content to click.I was added .cls to a string click me and added that .cls class some styling.
Check out this
jQuery(document).ready(function($) {
$('.cls').click(function(){
console.log('fire');
$('.open').toggleClass('oppenned');
});
});
.oppenned{
background:#e3e3e3;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="open">
<span class="cls"></span>
<span>
<ul class="sub-menu ">
<li onclick="slideTo('slide-2')">HOME
</li>
<li onclick="slideTo('slide-0')">ABOUT
</li>
<li onclick="slideTo('slide-1')">SERVICES
</li>
<li onclick="slideTo('slide-3')">PORTFOLIO
</li>
<li onclick="slideTo('slide-4')">CONTACT
</li>
</ul>
</span>
<span class="cls">click me</span>
</div>
Instead of applying click on .cls try it on .open.
jQuery(document).ready(function($) {
$('.open').click(function(){
console.log('fire');
$('.open').toggleClass('oppenned');
});
});
you was using click event on a non-visible span tag. That's why the click event is not working. just use any text or any element inside the span tag. Then you will get it visible. when you will on visible element it will work.
jQuery(document).ready(function($) {
$('.cls').click(function() {
console.log('fire');
$(this).parents('.open').stop().toggleClass('oppenned');
});
});
<style type="text/css">
.oppenned{
background:#e3e3e3;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="open">
<span class="cls">something to click me</span>
<span>
<ul class="sub-menu ">
<li onclick="slideTo('slide-2')">HOME</li>
<li onclick="slideTo('slide-0')">ABOUT</li>
<li onclick="slideTo('slide-1')">SERVICES</li>
<li onclick="slideTo('slide-3')">PORTFOLIO</li>
<li onclick="slideTo('slide-4')">CONTACT</li>
</ul>
</span>
<span class="cls">something to click me</span>
</div>
I'm new to jQuery and I've hit a bit of a snag.
Here is my HTML:
<div id="mainpage-tabs-area">
<ul class="nav cf">
<li class="tb-one">BTN1</li>
<li class="tb-two">BTN2</li>
<li class="tb-three">BTN3</li>
<li class="tb-four">BTN4</li>
</ul>
<div class="list-wrap">
<ul id="description">
<li>Hello, I am a description</li>
</ul>
<ul id="tabtwo" class="hide">
<li></li>
</ul>
<ul id="tabthree" class="hide">
<li></li>
</ul>
<ul id="tabfour" class="hide">
<li></li>
</ul>
</div> <!-- END List Wrap -->
</div> <!-- END Organic Tabs -->
And here is my current jQuery:
$(document).ready(function () {
var tabContent = $('ul.list-wrap').find('li').text();
if ($.trim(tabContent) === "") {
$('ul.nav li').hide();
}
});
What I want to be able to do is just the jQuery to check every li in .list-wrap and if that li is empty then remove the corresponding li in .nav as this is for a tab system where if no content is entered, they don't want it displaying.
Any suggestions for a newbie?
Nick
I'd iterate through the list items, check the length of each node's text, and hide the corresponding tab with:
$('.list-wrap li').each(function(i){
if(!$(this).text().length) $('#mainpage-tabs-area li').eq(i).hide();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="mainpage-tabs-area">
<ul class="nav cf">
<li class="tb-one">BTN1
</li>
<li class="tb-two">BTN2
</li>
<li class="tb-three">BTN3
</li>
<li class="tb-four">BTN4
</li>
</ul>
<div class="list-wrap">
<ul id="description">
<li>Hello, I am a description</li>
</ul>
<ul id="tabtwo" class="hide">
<li></li>
</ul>
<ul id="tabthree" class="hide">
<li></li>
</ul>
<ul id="tabfour" class="hide">
<li></li>
</ul>
</div>
<!-- END List Wrap -->
</div>
<!-- END Organic Tabs -->
The i in the each() function is the index of the element that the loop is on, and that allows you to target the corresponding tab element and hide it.
This should do the job:
$('.list-wrap ul li').each(function(){
var cnt = $('.list-wrap ul li').index( $(this) );
var txt = $(this).text();
if ($.trim(txt)==''){
$('.nav li').eq(cnt).hide();
}
});
jsFiddle Demo
I would suggest this If you are not making infinite lists
$('.tb-two').hide(); //if tabtwo is empty
$('.tb-hree').hide(); //if tabthree is empty
and so on...
Hi I wandering how I can add class .draggable on each element in .edit div
This is my html:
<div class="edit" >
<h2> Some title </h2>
<a> some link</a>
<p> some paragraph </p>
<ol>
<li> some list item</li>
<li> some list item</li>
<li> some list item</li>
</ol>
</div>
I don't really know how to grab each of the elements inside .edit and add class .draggable . The desired effect would be like that:
<div class="edit" >
<h2 class="draggable" > Some title </h2>
<a class="draggable"> some link</a>
<p class="draggable"> some paragraph </p>
<ol class="draggable">
<li class="draggable">some list item</li>
<li class="draggable"> some list item</li>
<li class="draggable"> some list item</li>
</ol>
</div>
You can find each element with * selector and assign class draggable.
Try this:
$('.edit').find('*').addClass('draggable');
DEMO