We Keep Coding

Menu nav li active remove

I want to assign "active" class to the menu. The active clip is throwing but not deleting. I do not understand why you did not delete. Thank you in advance to those who can help.
There is no error, it surprises me that it does not delete this way
<ul id="avia-menu" class="menu av-main-nav">
<li id="menu-item" class="menu-item">
<a href="home">
<span class="avia-bullet"></span>
<span class="avia-menu-text">Home</span>
<span class="avia-menu-fx">
<span class="avia-arrow-wrap">
<span class="avia-arrow"></span>
</span>
</span>
</a>
</li>
<li id="menu-item" class="menu-item">
<a href="about">
<span class="avia-bullet"></span>
<span class="avia-menu-text">About</span>
<span class="avia-menu-fx">
<span class="avia-arrow-wrap">
<span class="avia-arrow"></span>
</span>
</span>
</a>
</li>
<li id="menu-item" class="menu-item">
<a href="contact">
<span class="avia-bullet"></span>
<span class="avia-menu-text">Contact</span>
<span class="avia-menu-fx">
<span class="avia-arrow-wrap">
<span class="avia-arrow"></span>
</span>
</span>
</a>
</li>
</ul>
function updateMenu(url) {
const active = document.querySelector('#menu-item.active');
if (active !== null) {
active.classList.remove('active');
}
const links = Array.from(document.querySelectorAll('#menu-item'));
links.forEach(function (li) {
let anchor = li.querySelector("a");
if (url.indexOf(anchor.href) > -1) {
li.classList.add("active");
}
});
}
updateMenu(window.location.href);

You can simplify your function by consolidating your .add("active") and .remove("active") calls inside your loop. This saves you a query and avoids unsetting and resetting a class on the same element unnecessarily.
You also don't need the Array.from() call.
function updateMenu(url) {
const links = document.querySelectorAll('#menu-item');
links.forEach(li => {
let anchor = li.querySelector("a");
if (url.indexOf(anchor.href) > -1) {
li.classList.add("active");
} else {
li.classList.remove("active");
}
});
}
updateMenu(window.location.href);

Obtain text value from a DOM specific element

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 + '"]');

Changing Dom Element in Li without reloading?

I somehow got trouble finding a way to change the Dom Element of Li Object according to the Votes.
So a user could Upvote an Link and if the Link got more Upvotes then another it should go up until it has less then the next higher one basiclly.
Here the Html Code :
<li>
<span><span class="icon icon"></span><a href="http://"
rel="nofollow" target="_blank">Name</a> </span>
<div class="right"><button>+</button><span id="displayCount">(0).
</span></div>
</li>
<li>
<span><span class="icon icon2"></span><a href="http://"
rel="nofollow" target="_blank">Name</a> </span>
<div class="right"><button>+</button><span id="displayCount">(0).
</span></div>
</li>
And the Js:
$('button').click(function () {
var newCount = parseInt($('#displayCount').text()) + 1;
$('#displayCount').text(newCount);
});
So the Button does Count, however I can't figure out how to actually change the li with Icon 2 if the count is higher above the Li with Icon, without reloading the Page. How am I able to do this?
Cheers,
Julian

<li>
<span><span class="icon icon"></span><a href="http://"
rel="nofollow" target="_blank">Name</a> </span>
<div class="right"><button class="add">+</button><span class="displayCount">(0).
</span></div>
</li>
<li>
<span><span class="icon icon2"></span><a href="http://"
rel="nofollow" target="_blank">Name</a> </span>
<div class="right"><button class="add">+</button><span class="displayCount">(0).
</span></div>
</li>
$('button.add').click(function () {
var $element = $(this).parent().find('.displayCount:first');
var newCount = parseInt($element.text()) + 1;
$element.text('('+newCount+')');
});

copying the same thing on same context

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);
});

Select text from div - the not obvious way

Here is my div :
<div id="myDiv">The
<span class="cordial-err-corr" id="good0-0" data-original-title="" title="">best</span>
way to receive congrats
<span>
<span class="cordial-err-corr" id="good0-1" data-original-title="" title="">are</span>
<div class="btn-group">
<a class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a class="prop0-1">is</a></li>
<li><a class="prop0-1">are</a></li>
</ul>
</div>
</span> to give a correct answer.</div>
I would like to get this text : "The best way to receive congrats are to give a correct answer."
So I call $('#myDiv').text(). It does not work since I get the two elements in ul.dropdown-menu.
The next step is to filter or remove the un-wanted children, i.e.:
<div class="btn-group">
<a class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a class="prop0-1">is</a></li>
<li><a class="prop0-1">are</a></li>
</ul>
</div>
I tried to play with $.filter or $.not or $.children with jquery selectors, etc. I cannot find the correct way to do this. Need help!
You can find some code in jsfiddle : http://jsfiddle.net/Ku7FY/
[EDIT]
One solution suggests this code :
$('#result').append( $('#myDiv').text().replace($(".btn-group").text(),"") ).append('<br />')
If several div.btn-group exists, just loop as :
var result = $('#myDiv').text();
$(".btn-group").each(function() {
result = result.replace($(this).text(),"");
});
$('#result').append(result).append('<br />')

So, if I get this straight, you want to exclude the list from the .text(). Try something like:
$('#result').append( $('#myDiv').text().replace($(".dropdown-menu").text(),"") ).append('<br />')

If you don't mind placing all the "dumb" text in spans, then you can do it very simply by only grabbing "dumb" text spans and ".cordial-err-corr" spans (and a find()).
<div class="well" id="myDiv"><span class="cordial-content">The </span>
<span class="cordial-err-corr" id="good0-0" data-original-title="" title="">best </span>
<span class="cordial-content">way to receive congrats </span>
<span>
<span class="cordial-err-corr" id="good0-1" data-original-title="" title="">are </span>
<div class="btn-group">
<a class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a class="prop0-1">is</a></li>
<li><a class="prop0-1">are</a></li>
</ul>
</div>
</span> <span class="cordial-content">to give a correct answer. </span></div>
and
$('#myDiv').find('.cordial-err-corr,.cordial-content').text()
Demo: Fiddle

I have an ugly, though simple enough (I guess) method:
We can make a copy, then remove the dom elements we don't want to display. Then we can get the desired text.
var clone_div = $('#myDiv').clone();
clone_div.find('.btn-group').remove();
$('#result').append(clone_div.text()).append('<br />');
Here is jsfiddle. http://jsfiddle.net/Ku7FY/4/

Try
function process(el){
var array = [];
$(el).contents().each(function(){
var $this = $(this), text;
if(this.nodeType == 3){
text = $.trim($this.text());
if(text){
array.push(text)
}
} else if($this.is(':not(.btn-group)')){
Array.prototype.push.apply(array, process(this))
}
})
return array;
}
console.log(process($('#myDiv')).join(' '))
Demo: Fiddle