I have three links (anchor tag) that represent standards like std1, std2. I want to get the active class value.
<li data-interest="1" class="check <? if($std_id == 1){?> class="active"<?}?>" >
<a href="#1" onclick="changeDiv('1','S1')" data-toggle="tab" title="S1">
<span class="round-tabs green">
<span class="grade_catgory">S1</span>
</span>
</a></li>
<li data-interest="2" class="check <? if($std_id == 2){?> class="active"<?}?>" >
<a onclick="changeDiv('2','S2')" data-toggle="tab" title="S2">
<span class="round-tabs yellow">
<span class="grade_catgory">S2</span>
</span>
</a>
</li>
jQuery
$(function() {
// var val = $('ul#myTab1').find('li.active').data('interest');
var itemType = $('ul#myTab1').find('li.check').data('interest');
alert(itemType);
});
I want the value like 1, 2, etc. Where can I put this?
Try this:
$("li").each(function(){ // loop through all li
if($(this).hasClass("active")) { // check if li has active class
console.log($(this).data("interest")) // get the value of data-interest attribute
}
})
Try this :
var val = $('body').find('li.active').attr('data-interest');
Related
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);
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 need to add additional styles to only one element of a list depending if the string matches with the url.
In this moment is identifying a unique string form a list and one element in the url, then it compare these two and add the styles depending if the strings are equal, but when doing this is applaying the style to all the elements in the list.
The result should add the styles only to the elements that match the string in the url.
<ul class="__filter--list--categoria" style="display: block;">
<li class="__filter--list--item">
<a class="__anchor" href="/t/cervezas">Cervezas</a>
<ul>
<li class="__filter--list--item">
<a class="__anchor" href="/t/cervezas/nacionales" style="background: red;">Nacionales</a>
</li>
<li class="__filter--list--item">
<a class="__anchor" href="/t/cervezas/internacionales" style="background: red;">Internacionales</a>
</li>
<li class="__filter--list--item">
<a class="__anchor" href="/t/cervezas/artesanales" style="background: red;">Artesanales</a>
</li>
</ul>
</li>
</ul>
var currentUrl = window.location.href.split('/')[5];
var categoryName = $('.__filter--list--categoria .__filter--list--item li .__anchor');
var categoryArray = [];
$(categoryName).each(function() {
categoryArray.push($(this).text())
});
for (x = 0; x < categoryArray.length; x++) {
var categoryString = categoryArray[x].toLowerCase();
if (categoryString === currentUrl) {
console.log('EQUAL...')
$(categoryName).css('background', 'red')
} else {
console.log('NOT EQUAL...')
}
}
You can loop li item by each method, and check href with testurl
let testurl = '/t/cervezas/nacionales';
$('li').each(function(index,item){
let href = $(item).find('a').attr('href');
if(href == testurl){
$(item).css('border', '1px solid green');
}
})
let testurl = '/t/cervezas/nacionales';
$('li').each(function(index,item){
let href = $(item).find('a').attr('href');
if(href == testurl){
$(item).css('border', '1px solid green');
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="__filter--list--categoria" style="display: block;">
<li class="__filter--list--item">
<a class="__anchor" href="/t/cervezas">Cervezas</a>
<ul>
<li class="__filter--list--item">
<a class="__anchor" href="/t/cervezas/nacionales" style="background: red;">Nacionales</a>
</li>
<li class="__filter--list--item">
<a class="__anchor" href="/t/cervezas/internacionales" style="background: red;">Internacionales</a>
</li>
<li class="__filter--list--item">
<a class="__anchor" href="/t/cervezas/artesanales" style="background: red;">Artesanales</a>
</li>
</ul>
</li>
</ul>
Just to explain what is causing the issue, your problem is with this line:
$(categoryName).css('background', 'red')
This is applying the background red to every element that matches the categoryName selector, which is all your anchor tags. You don't currently have a class that uniquely identifies the different url's, see https://stackoverflow.com/a/56634800/264607 for a way to loop through your li elements and apply the style to the correct one
I have html something like...
<ul id="sidemenu" class="wraplist wrapper-menu">
<li class="auto" ng-class='{"active": active == 1 }' ng-click="makeActive(1)">
<span class="arrow material-icons">arrow_down</span>
<li>
<li class="auto" ng-class='{"active": active == 2 }' ng-click="makeActive(2)">
<span class="arrow material-icons">arrow_down</span>
<li>
<ul>
on ng-click=makeActive(), I want to change the value 'arrow_down' to 'arrow_right' of that particular < li> element only. and if again the same is clicked I want to change it to 'arrow_down'. Rest all < li> will have span text unchanged. How can I do this using angularjs? i.e. by using angular.element? OR is there any other way?
keyboardArrow refers to only one variable. So you have to create two scope variables: keyboardArrow1 and keyboardArrow2
<ul id="sidemenu" class="wraplist wrapper-menu">
<li class="auto" ng-class='{"active": active == 1 }' ng-click="makeActive(1)">
<span class="arrow material-icons">{{ keyboardArrow1 }}</span>
<li>
<li class="auto" ng-class='{"active": active == 2 }' ng-click="makeActive(2)">
<span class="arrow material-icons">{{ keyboardArrow2 }}</span>
<li>
<ul>
Update
According to your needs, here is a plunker.
Updated my answer from our discussion in comments.
1) In your controller, define keyboardArrow1 and keyboardArrow2:
$scope.keyboardArrow1 = 'A';
$scope.keyboardArrow1 = 'B';
2) You can now display theses values like this:
<ul>
<li ng-class="{'active': active == keyboardArrow1}" ng-click="makeActive(keyboardArrow1)">
{{keyboardArrow1}}
</li>
<li ng-class="{'active': active == keyboardArrow2}" ng-click="makeActive(keyboardArrow2)">
{{keyboardArrow2}}
</li>
</ul>
Note that I also changed the ng-class condition.
3) When clicking a <li>, call makeActive():
$scope.makeActive = function(arrow) {
$scope.active = arrow;
}
I have a component which have buttons and list both of which perform events on click. I need a common way to get the ancestor element for these elements. The structure looks like
<div class='a'>
<button class ='b' data-name="hello">
<span class ='c'>clickMe
<span>somehting</span>
</span>
<button>
<ul class ='d'>
<li data-name="about">
<span class ='e'>something here
<span>somehting</span>
</span>
</li>
<li data-name="home">
<span class ='e'>something elser here
<span>somehting</span>
</span>
</li>
</ul>
</div>
I try to get the element button and li because I need to get data-name information.
e.target is the element that was clicked
var targetel = goog.dom.getAncestorByClass(e.target,null,class??);
Not sure how to get the correct element irrespective if its a button or li. Do i need to add a unique class to all the elements ?
Just use e.currentTarget
var result = document.querySelector('#result');
var clickables = document.querySelectorAll('button, li');
//add click listener to elements
for (var i = 0, l = clickables.length; i < l; i++) {
clickables[i].addEventListener('click', getDataName);
}
function getDataName(e) {
var dataName = e.currentTarget.getAttribute('data-name');
result.textContent = dataName;
}
<div class='a'>
<button class ='b' data-name="hello">
<span class ='c'>clickMe
<span>somehting</span>
</span>
</button>
<ul class ='d'>
<li data-name="about">
<span class ='e'>something here
<span>somehting</span>
</span>
</li>
<li data-name="home">
<span class ='e'>something elser here
<span>somehting</span>
</span>
</li>
</ul>
</div>
<div id="result">data-name of clicked element goes here</div>
https://api.jquery.com/parents/
Use the jquery.parents("li") function. it will select all the parents that match your css filter. so you can do
var parentli = targete1.parents("li");
var button = targete1.parents("div").children[0];
Or something similar to that.
EDIT:
Not sure why i got downvoted, here is my idea in action.
maybe press f12 to inspect element and look at the console log.
var onClick = function () {
var parentEl = $(this).parents("button, li")[0];
console.log(parentEl);
$("#result")[0].innerText = parentEl.getAttribute("data-name");
};
$('span.c').click(onClick);
$('li span.e').click(onClick);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='a'>
<button class='b' data-name="hello">
<span class='c'>clickMe
<span>something</span>
</span>
</button>
<ul class ='d'>
<li data-name="about">
<span class ='e'>something here
<span>somehting</span>
</span>
</li>
<li data-name="home">
<span class ='e'>something elser here
<span>something</span>
</span>
</li>
</ul>
</div>
<div id="result">result goes here</div>