jQuery move node out of its parent - javascript

I have this code:
<ul class="list">
<li>
<a href="#" >
<img src="IMAGE" />
SOME TEXT
</a>
</li>
<li>
<a href="#" >
<img src="ANOTHER IMAGE" />
SOME DIFFERENT TEXT
</a>
</li>
</ul>
I want the images prepended to the parent node like this:
<ul class="list">
<li>
<img src="IMAGE" />
<a href="#" >
SOME TEXT
</a>
</li>
<li>
<img src="ANOTHER IMAGE" />
<a href="#" >
SOME DIFFERENT TEXT
</a>
</li>
</ul>


Try this:
$('.list > li > a > img').each(function() {
$(this).insertBefore($(this).parent());
})
Demo at http://jsfiddle.net/alnitak/3nEVz/
EDIT I came up with a cleaner version:
$('.list > li > a > img').each(function() {
$(this).parent().before(this);
})


$('ul.list img').each(function(_, elem) {
var $elem = $(elem);
$elem.prependTo( $elem.closest('li') );
});
demo: http://jsfiddle.net/hPbZD/1/


Try this:
$(function() {
$('ul.list > li > a > img').each(function() {
$(this).closest('li').prepend(this);
});
});
See it in action here.

Related

Bi-directional highlighting of elements with same class

I have 2 lists of items. One is an ordinary <ul> and the other is a grid of images wrapped in <div>s.
I am looking to highlight the item hovered on both lists that will work in both directions.
So if I hover over <li>Apple, both the <li>Apple & <div>Apple get highlighted. And this should also work in the other direction, if I hover over the <div>Apple, both the <div>Apple and <li>Apple is highlighted.
Notes:
I am able to add the unique class name to any element. Either the <li> & <div> or the <a> within.
Highlighting can be either as an .active class or inline styling.
Similar to the below question but works in both directions:
Jquery 'Highlight' element with the same class
<ul>
<li class="app-hover-select">
<a class="item-1" href="">Apples</a>
</li>
<li class="app-hover-select">
<a class="item-2" href="">Pears</a>
</li>
<li class="app-hover-select">
<a class="item-3" href="">Bananas</a>
</li>
<li class="app-hover-select">
<a class="item-4" href="">Pineapples</a>
</li>
</ul>
<div class="wrapper">
<div class="app-hover-select">
<a class="item-1" href="">
<img scr="">
Apples
</a>
</div>
<div class="app-hover-select">
<a class="item-2" href="">
<img scr="">
Pears
</a>
</div>
<div class="app-hover-select">
<a class="item-3" href="">
<img scr="">
Bananas
</a>
</div>
<div class="app-hover-select">
<a class="item-4" href="">
<img scr="">
Pineapples
</a>
</div>
</div>
My current jQuery with current HTML:
jQuery('.app-hover-select > a').hover(function() {
var appClass = jQuery(this).attr("class");
jQuery(appClass).toggleClass('active');
});
My logic is:
On hover of .app-hover-select > a
var appClass = Get the class
Add class active to all elements with the class appClass

In case you want this:
Try this-
jQuery(".app-hover-select > a").hover(function () {
const listOfItems = this.parentElement.parentElement;
const listItem = this.parentElement;
const i = Array.from(listOfItems.children).indexOf(listItem);
jQuery("ul .app-hover-select").each((_i, el) => {
if (_i === i) {
el.classList.add("active");
} else {
el.classList.remove("active");
}
});
jQuery(".wrapper .app-hover-select").each((_i, el) => {
if (_i === i) {
el.classList.add("active");
} else {
el.classList.remove("active");
}
});
});

I want to add delay to my menu when pictures are changing. How is it possible?

These are my HTML and jQuery codes. When nav and its children become hover, I would like to change the pictures of menu with delay. Can you guide me ?
<!-- header --
<nav class="nav">
<ul>
<li>
<a href="" data-index="1">
Home
</a>
</li>
<li>
<a href="" data-index="2">
About Us
</a>
</li>
<li>
<a href="" data-index="3">
Services
</a>
</li>
<li>
<a href="" data-index="4">
Shop
</a>
</li>
<li>
<a href="" data-index="5">
Our Teams
</a>
</li>
<li>
<a href="" data-index="6">
Blog
</a>
</li>
<li>
<a href="" data-index="7">
Contact Us
</a>
</li>
</ul>
</nav>
These are my HTML and jQuery codes. When nav and its children become hover, I would like to change the pictures of menu with delay. Can you guide me ?
jQuery
// menu toggler click event
$(".menu-toggler").click(function() {
$(this).toggleClass("menu-toggler-close");
$(".nav").fadeToggle();
});
$(".nav").click(function() {
$(".menu-toggler").removeClass("menu-toggler-close");
$(".nav").fadeOut();
});
$(".nav > ul").click(function(e) {
e.stopPropagation();
});
$(".nav > ul > li > a").hover(
function() {
var dataIndex = $(this).data("index");
$(".nav").css(
"background",
"url('images/nav" + dataIndex + ".webp') center center / cover"
);
},
function() {
$(".nav").css("background", "rgba(0, 0, 0, 0.8)");
},

You can use setTimeout() method to delay your code.
setTimeout(function()
{
$(".nav").css(
"background",
"url('images/nav" + dataIndex + ".webp') center center / cover"
);
}, 1000);

onClick issue with navigation dropdown for container(needs double clicks to dropdown)

I have trouble with my onClick function within my JS file
When a tab is opened, and I try to click on the second link, the new tab won't open unless the link is clicked twice.
here is the html code:
<body>
<nav>
<div id="navContainer">
<ul>
<li> <a href='' class='tabButton' data-openTab='1'>1</a></li>
<li> <a href='' class='tabButton' data-openTab='2'>2</a></li>
<li> <a href='' class='tabButton' data-openTab='3'>3</a></li>
<li> <a href='' class='tabButton' data-openTab='4'>4</a></li>
<li> <a href='' class='tabButton' data-openTab='5'>5</a></li>
</ul>
</div>
<div id = "tabCont" class="tabContainer">
<div id="1">
</div>
</div>
<div id="2" >
CLOSE
</div>
<div id="3" >
CLOSE
</div>
<div id="4" >
CLOSE
</div>
<div id="5" >
CLOSE
</div>
</nav>
</body>
and here is the JS
$(document).ready(function() {
document.menuIsOpen = false;
$('.tabContainer > div').hide();
$('.tabContainer > div:first-of-type').hide();
$('.tabButton').click(function(event) {
if (document.menuIsOpen == false) {
document.menuIsOpen = true;
event.preventDefault();
$('.tabContainer > div').hide();
$("#" + $(this).attr('data-openTab')).toggle("slow").css("display", "block");
$('.tabButton').click(function(event) {
$('.tabContainer > div').hide();
$("#" + $(this).attr('data-openTab')).show().css("display", "block");
});
} else {
document.menuIsOpen = false;
event.preventDefault();
$('.tabContainer > div').hide("slow");
$('.tabContainer > div:first-of-type').hide("slow");
}
$('.closeButton').click(function(event) {
event.preventDefault();
$('.tabContainer > div').hide("slow");
$('.tabContainer > div:first-of-type').hide("slow");
});
});
$('.tabContainer > div').hide();
$('.tabContainer > div:first-of-type').hide();
});
I'm sure I have really messy code but it works as it should APART from the onClick issue.
Thank you in advanced!

HTML:
<nav>
<div id="navContainer">
<ul>
<li>
<a href='' class='tabButton' data-openTab='1'>1</a>
</li>
<li>
<a href='' class='tabButton' data-openTab='2'>2</a>
</li>
<li>
<a href='' class='tabButton' data-openTab='3'>3</a>
</li>
<li>
<a href='' class='tabButton' data-openTab='4'>4</a>
</li>
<li>
<a href='' class='tabButton' data-openTab='5'>5</a>
</li>
</ul>
</div>
<div id = "tabCont" class="tabContainer">
<div id="1">1
CLOSE
</div>
<div id="2">2
CLOSE
</div>
<div id="3">3
CLOSE
</div>
<div id="4">4
CLOSE
</div>
<div id="5">5
CLOSE
</div>
</div>
</nav>
JS:
document.menuIsOpen = false;
$('.tabContainer > div').hide();
$('.tabButton').click(function(event) {
var
open = $("#" + $(this).attr('data-openTab')),
isOpened = open.is('.opened');
event.preventDefault();
if (document.menuIsOpen) {
document.menuIsOpen = false;
$('.opened').hide("slow").removeClass('opened');
}
if (!isOpened) {
document.menuIsOpen = true;
open.addClass('opened').show("slow").css("display", "block");
}
});
$('.closeButton').click(function(event) {
event.preventDefault();
$('.opened').hide("slow").removeClass('opened');
});
DEMO: http://jsfiddle.net/nothrem/mcgv4gok/

Count the number of displayed elements in a HTML list

I have a list of list items which are display: none by default. I programmatically change a certain number of them to list-items.
I've been trying to use querySelectorAll but when I try:
document.querySelectorAll("#ulname style[display*='list-item']")
it returns an empty array (I know it is at least one).
Ideas on how to modify my selectors or another approach? I would like to know after the fact how many items are displayed.

var liList = document.getElementById("myul").getElementsByTagName("li");
var largo = liList.length
alert(largo);
WHERE "myul" is the id of the list and largo is number of li items
<ul id="myul">
<li>hello</li>
<li>world</li>
</ul>
the alert would be 2
<ul id="myul">
<li>hello</li>
<li>world
<ul>
<li>here we are</li>
<ul>
</li>
</ul>
the alert would be 3

var ul = document.getElementById("myul");
var liNodes = [];
for (var i = 0; i < ul.childNodes.length; i++) {
if (ul.childNodes[i].nodeName == "LI") {
liNodes.push(ul.childNodes[i]);
}
}
totalLis = liNodes.length;
Adding text to your ul tag
var txt = document.createTextNode("gsdgds");
ul.appendChild(txt);
Adding li tag to your ul tag
var txt = "<li>dsgdsgs</li>";
ul.innerHTML(txt);

<!DOCTYPE html>
<html>
<body onload="myFunction()">
<p>Maybe this answer can help. I improvise for this after a few days of testing. This is what I got. Hope it helps you.</p>
<li class="sidenav-item open active">
<a href="#" class="sidenav-link sidenav-toggle" ></i>
<div class="text-white">Hi, There!
<div class="badge badge-primary" id="ul-me"></div></div>
</a>
<ul class="sidenav-menu" id="ul1">
<li class="sidenav-item active">
<a href="#" class="sidenav-link" >
<div class="text-white" >Home</div>
</a>
</li>
<li class="sidenav-item" id="ul2">
<a href="#" class="sidenav-link" >
<div class="text-white" >Blog</div>
</a>
</li>
<li class="sidenav-item" id="ul3">
<a href="#" class="sidenav-link" >
<div class="text-white" >Downloads</div>
</a>
</li>
<li class="sidenav-item" id="ul4">
<a href="#" class="sidenav-link" >
<div class="text-white" >Contact</div>
</a>
</li>
<li class="sidenav-item" id="ul5">
<a href="#" class="sidenav-link" >
<div class="text-white" >About</div>
</a>
</li>
</ul>
</li>
'''
<!-- Count Item (li) in <ul> -->
<script>
function myFunction() {
var mylist = [document.getElementById("ul1"), ("ul2"), ("ul3"), ("ul4"), ("ul5")];
document.getElementById("ul-me").innerHTML = mylist.length;
}
</script>
</body>
</html>

Change all children's image source

I have a need to change the src of all the Images found within an UL element. I do have a Jquery library so maybe that will make it easier. The HTML looks like this.
<ul id="sortable" class="ui-sortable">
<li class="ui-state-default">
<img id="aImg" alt="sortable image" src="images/a.jpg" />
</li>
<li class="ui-state-default">
<img id="bImg" alt="sortable image" src="images/b.jpg" />
</li>
<li class="ui-state-default">
<img id="cImg" alt="sortable image" src="images/c.jpg" />
</li>
</ul>
What's the quickest method I could embody to rename all image sources to the same filename with a "-backup" before the file extension?

Pass a callback to .attr():
$('ul img').attr('src', function(i, src) {
return src.replace('.', '-backup.');
});

Try this
$("#sortable li img").each(function(){
this.src = this.src.replace(".jpg", "-backup.jpg");
});

$('ul li img').each(function() {
$(this).attr('src', $(this).attr('src').replace('\.jpg', '-backup.jpg')
})

Categories

Resources