i have a problem with jquery i have 2 different set of icons which of each i want to the same thing:
My primary codes are
<ul>
<li>
<a href="">
<i class="fa fa-facebook"></i>
</a>
</li>
<li>
<a href="">
<i class="fa fa-twitter"></i>
</a>
</li>
</ul>
what i want after loading on my browse
<ul>
<li>
<a href="">
<i class="fa fa-facebook"></i>
<i class="fa fa-facebook"></i>
</a>
</li>
<li>
<a href="">
<i class="fa fa-twitter"></i>
<i class="fa fa-twitter"></i>
</a>
</li>
</ul>
i have tried to use
var socials = $("ul a");
socials.each(function ( index,elem ){
var jumpIcons = $( this ).find("i");
socials.append(jumpIcons);
});
but the result is browser is hangged :'(
You need to clone and add the element to the current a
var socials = $("ul a");
socials.each(function (index, elem) {
var jumpIcons = $(this).find("i");
//first you need to clone the current element else, you are just repositioning the current `i` elemnet
//then you need to append it to the current a element, not to all `a` element in the socials - this will cause a lot of iteration if there a lot of `ul a` elements in the page resulting in unresponisve page
$(this).append(jumpIcons.clone());
});
Demo: Fiddle
A simplified version
var socials = $("ul a");
socials.append(function (index, elem) {
return $(this).find("i").clone();
});
Demo: Fiddle
You can make use of clone(), see below code
var socials = $("ul a");
socials.each(function ( index,elem ){
var jumpIcons = $( this ).find("i").clone();//make clone of i
$(this).append(jumpIcons);// use $(this) to get current element
});
Just clone that i for each a with all the events of it(if needed) and append it to a. Try with -
var socials = $("li a");
socials.each(function ( index, elem ){
var jumpIcons = $( this ).find("i").clone(true, true); //remove true, true if you dont need the events
$(this).append(jumpIcons);
});
Related
I'm trying to obtain an element of the DOM witch contains some specific text, but the object I'm trying to obtain is undefined.
I need to obtain the "a" tag (parent element) of the "span" tag which contains the text stored in the variable "current_id".
The current_id refers to the text outputed in the tag "t t-esc="active_kid.id" />".
<ul class="nav nav-pills flex-column" id="kid_list">
<li class="nav-item">
<a t-attf-href="/califications/{{active_kid.id}}" t-attf-class="nav-link active"><t t-
esc="active_kid.name"/>
<span class="badge badge-pill float-right" style="display: none;"><t t-esc="active_kid.id" />
</span>
</a>
</li>
var current_id = window.location.pathname.replace('/califications/','');
if (Number.isInteger(parseInt(current_id, 10))){
var object = $('#kid_list > li > a > span:contains(${current_id})');
var a = $(object).parentElement;
}
Outputed HTML code:
<li class="nav-item">
<a href="/califications/14" class="nav-link">Azure Interior
<span class="badge badge-pill float-right" style="display:
none;">14</span>
</a>
</li>
Thanks for reading!
To retrieve the parent a element of the span which contains the text matching the value of current_id you can use a combination of the :contains selector along with closest(). Try this:
var current_id = '14'; // window.location.pathname.replace('/califications/', '');
var $a = $('span.badge:contains("' + current_id + '")').closest('a');
$a.addClass('foo');
.foo { color: #C00; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>
<a href="/califications/14" class="nav-link">
Foo bar
<span class="badge badge-pill float-right" style="display: none;">12</span>
</a>
</li>
<li class="nav-item">
<a href="/califications/14" class="nav-link">
Azure Interior
<span class="badge badge-pill float-right" style="display: none;">14</span>
</a>
</li>
</ul>
However, given that your window.location.pathname appears to already contain the value held in the href attribute of the a you could simplify this and just select by the attribute on that element directly:
var $a = $('a[href="' + window.location.pathname + '"]');
I'm struggling with a very simple problem that I can't solve.
I'm using Framework7 (JS Framework for mobile application) and I have two list in my page:
First list:
<ul>
<li>
<a id="android" class="link external" target="_blank" href="android_link"></a>
</li>
<li>
<a id="iOS" class="link external" target="_blank" href="ios_link"></a>
</li>
<li>
<a id="windows" class="link external" target="_blank" href="windows_link"></a>
</li>
</ul>
Second list:
<ul>
<li>
<a href="fb_link" target="_blank" class="item-link item-content link external" id="facebook">
<div class="item-media">
<i class="f7-icons">logo_facebook</i>
</div>
<div class="item-inner">
<div class="item-title">Facebook</div>
</div>
</a>
</li>
<li>
<a href=instagram_link" target="_blank" class="item-link item-content link external" id="instagram">
<div class="item-media">
<i class="f7-icons">logo_instagram</i>
</div>
<div class="item-inner">
<div class="item-title">Instagram</div>
</div>
</a>
</li>
</ul>
So, I need to take the href attribute on click event. I wrote this:
Dom7('.link.external').on('click', (event) => {
// First try
href = event.target.getAttribute('href')
console.log(href)
// Second trye
console.log(event.srcElement.href)
// Third try
var href = Dom7('a.link.external').attr('href');
var id = Dom7('a.link.external').attr('id');
console.log(href)
console.log(id)
})
I've tried three different solutions, but none of them work.
The first one and second one works only for the first list, I think because the <a> tag doesn't contains html inside.
The third one always return me the href and id of the first elements of the first list (android), even if I click in the second list.
Can you help me to solve this problem?
Solution 1
<ul>
<li>
<a id="android" class="link external" target="_blank" href="android_link" onclick="linkClicked(this); return false;"></a>
</li>
</ul>
<script>
function linkClicked(object) {
consile.log(object.getAttribute("href"));
return false;
}
</script>
Solution 2
var elements = document.getElementsByClassName('link');
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener('click', linkClicked, false);
}
function linkClicked() {
console.log(this.getAttribute("href"));
};
if you can use jquery, use this working code :
$('.link.external').on('click', (event) => {
href = event.target.getAttribute('href');
alert(href);
});
jsfiddle
Here's my code:
I want it in a way that when i click on a child link, it becomes active and the parent link is active too. I utilize the css class .active for my active classes for both the main and sub-menu.
The below JS snippet works but only for the menus without sub-menus
$(document).ready(function($) {
var url = window.location.href;
var activePage = url;
$('.menu li a').each(function() {
var linkPage = this.href;
if (activePage == linkPage) {
$(this).closest("li").addClass("active");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
<ul class="list">
<li class="header">MAIN NAVIGATION</li>
<li class="">
<a href="index.php">
<i class="material-icons">home</i>
<span>Dashboard</span>
</a>
</li>
<li>
<a href="sell.php">
<i class="material-icons">receipt</i>
<span>Sell</span>
</a>
</li>
<li>
<a href="#">
<i class="material-icons">show_chart</i>
<span>Reporting</span>
</a>
</li>
<li>
<a href="javascript:void(0);" class="menu-toggle">
<i class="material-icons">apps</i>
<span>Products</span>
</a>
<ul class="ml-menu">
<li>
Add Product
</li>
<li>
All Products
</li>
<li>
Add Category
</li>
<li>
All Categories
</li>
</ul>
</li>
</ul>
</div>
<!-- #Menu -->
Implement an on mousedown event listener for your anchor tags, passing in the id for each anchor tag and use the parentElement property to get the element's parent.
document.getElementById("myLI").parentElement.nodeName;
you can try this JS code:
$(document).ready(function () {
$('a').click(function () {
//removing the previous selected menu state
$('.menu').find('li.active').removeClass('active');
//adding the state for this parent menu
$(this).parents("li").addClass('active');
});
});
And the css for Active link:
.active > a {
color:red;
}
hope it helps...
I have a mobile menu button that has an animation, the class changes on click of the menu and click backs to normal when clicked again. A menu also pops out on click.
I want the animation end state to also click back to normal when I click one of the pop out menu anchor links.
Here is my HTML code:
<div class="o-grid__item">
<button id="menu" class="c-hamburger c-hamburger--htx">
<span>toggle menu</span>
</button>
</div>enter code here
<nav class="main-menu">
<ul>
<li>
<a href="#welcome">
<i class="fa"></i>
<span class="nav-text">Home</span>
</a>
</li>
<li>
<a href="#portfolio">
<i class="fa"></i>
<span class="nav-text">Work</span>
</a>
</li>
<li>
<a href="#about">
<i class="fa"></i>
<span class="nav-text">About</span>
</a>
</li>
<li>
<a href="#contact">
<i class="fa"></i>
<span class="nav-text">Contact</span>
</a>
</li>
</ul>
</nav>
Here is the script I'm using to toggle the menu
$(document).ready(function(){
$(".c-hamburger").click(function(){
$(".main-menu").toggleClass("expand-menu");
});
});
Here is the code for the remove/add class for animating the button.
(function() {
"use strict";
var toggles = document.querySelectorAll(".c-hamburger");
for (var i = toggles.length - 1; i >= 0; i--) {
var toggle = toggles[i];
toggleHandler(toggle);
};
function toggleHandler(toggle) {
toggle.addEventListener( "click", function(e) {
e.preventDefault();
(this.classList.contains("is-active") === true) ? this.classList.remove("is-active") : this.classList.add("is-active");
});
}
})();
I need to know how to add remove this class for the menu button, on click of one of my list items in my list? any help much appreciated.
to remove a class from an element instead of just toggling it, use the .removeClass extension for the JQuery element selector. Add this to the anchor links
If you are using jquery anyways, then use this for the class toggling logic
$(".main-menu ul li a").click( function(){
e.preventDefault();
$(this).closest("li").toggleClass("is-active").siblings().removeClass("is-active");
});
I have some html that looks like this:
<div class="list-group">
<a id="427" href="#" class="list-group-item"><i class="fa indent0 fa-caret-down"></i>Home</a>
<a id="428" href="#" class="list-group-item"><i class="fa fa-caret-right indent1"></i>Images</a>
<a id="429" href="#" class="list-group-item"><i class="fa fa-caret-right indent1"></i>Videos</a>
<a id="430" href="#" class="list-group-item"><i class="fa indent1 fa-caret-right"></i>Documents</a>
<a id="431" href="#" class="list-group-item" style="display: none;"><i class="fa fa-caret-right indent2"></i>Sub category</a>
<a id="432" href="#" class="list-group-item" style="display: none;"><i class="fa indent2 fa-caret-down"></i>Another sub</a>
<a id="433" href="#" class="list-group-item" style="display: none;"><i class="fa fa-caret-right indent3"></i>Super sub</a>
<a id="434" href="#" class="list-group-item" style="display: none;"><i class="fa fa-caret-right indent2"></i>asdfasdf</a>
<a id="435" href="#" class="list-group-item" style="display: none;"><i class="fa fa-caret-right indent2"></i>asdf</a>
<a id="436" href="#" class="list-group-item"><i class="fa fa-caret-right indent1"></i>Audio</a>
</div>
when I click the .fa I want it to get the indent plus 1 between itself and the next item with the same indent class to unhide.
So in this case,
if we press on id 430, it will show 431, 432, 434 and 435.
Now, that is the easy part. What I need it to also do, is check of any element between 430 and 436 (in this case) and if any of the elements have the class fa-caret-down then it shows the children of that too.
Currently I have made this into a plugin and my code actually works, but I think it could be a lot neater.
I am hoping that some of your gurus will see a simpler solution.
Here is my solution currently:
events: function () {
var self = this;
$(self.element).on("click", ".fa", function (e) {
e.stopPropagation();
var $target = $(this);
var indent = $target.prop('className').match(/\b(indent\d+)\b/)[1];
if ($target.hasClass("fa-caret-right")) {
$target.removeClass("fa-caret-right").addClass("fa-caret-down");
self.showChildren($target.parent(), indent);
if (typeof self.options.onItemExpand === "function") {
self.options.onItemExpand.apply(this, arguments);
}
} else {
var $children = $target.parent().nextUntil("a:has(." + indent + ")");
$target.removeClass("fa-caret-down").addClass("fa-caret-right");
$children.hide();
if (typeof self.options.onItemContract === "function") {
self.options.onItemContract.apply(this, arguments);
}
}
})
},
showChildren: function ($target, className) {
var self = this;
var num = parseInt(className.match(/(\d+)$/)[1], 10);
var $children = $target.nextUntil("a:not(:has(.indent" + (num + 1) + "))");
$.each($children, function (i, item) {
var $item = $(this).find(".fa");
if ($item.hasClass("fa-caret-down")) {
var indent = $item.prop('className').match(/\b(indent\d+)\b/)[1];
self.showChildren($(this), indent);
}
});
$children.show();
}
My solution nearly works (although I hope someone can make it neater) but there is an issue.
If you click Home it will hide all (as expected) but if you click to show again, it will show all but Audio. The same thing happens if you expand down to Documents > Another sub > Super sub and expand that. When you contract it, Audio will vanish.
http://jsfiddle.net/sn92W/
I assume this is to do with nextUntil.
Please help :)