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 + '"]');
Related
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');
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+')');
});
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);
});
I have div which shows a tree in it. I want to get the value of the item selected in tree. But i am unable to get the value of it i am attaching a sample code.
Also this tree is added to the div dynamically.
<div id="listMergefile">
<ul class="jqueryFileTree">
<li class="file ext_pdf">
<a rel="/dssd/.pdf" class="FontClass" href="">
</a>
</li>
<li class="file ext_rep">
<a rel="/Expressions (2) 2014-26-08.repdocument" class="FontClass" href="">
</a>
</li>
</ul>
</div>
Here is one way to do it - http://jsfiddle.net/07tm0v5o/
$('li').mouseover(function(){
var relValue = $(this).find('a').attr('rel');
var relSpan = '<span class="relValue">' + relValue + '</span>';
$(this).append(relSpan);
});
$('li').mouseout(function(){
$(this).find('.relValue').remove();
});
The principal is the same regardless of how you'll be viewing the data.
I'm not sure how to fix it, but I always get -1 when using inArray(). To be more explicit, here's what I'm doing :
<!-- HTML Markup -->
<nav class="navigation clearfix">
<a class="home-anchor" data-class="home-anchor" href="#">
<span class="icons-wrapper">
<i class="icon-normal-state"></i>
<i class="icon-active-state"></i>
</span>
<span class="anchor-text">Home</span>
</a>
<a class="about-anchor" data-class="about-anchor" href="#">
<span class="icons-wrapper">
<i class="icon-normal-state"></i>
<i class="icon-active-state"></i>
</span>
<span class="anchor-text">About</span>
</a>
<a class="work-anchor" data-class="work-anchor" href="#">
<span class="icons-wrapper">
<i class="icon-normal-state"></i>
<i class="icon-active-state"></i>
</span>
<span class="anchor-text">Work</span>
</a>
<a class="shop-anchor" data-class="shop-anchor" href="#">
<span class="icons-wrapper">
<i class="icon-normal-state"></i>
<i class="icon-active-state"></i>
</span>
<span class="anchor-text">Shop</span>
</a>
<a class="services-anchor" data-class="services-anchor" href="#">
<span class="icons-wrapper">
<i class="icon-normal-state"></i>
<i class="icon-active-state"></i>
</span>
<span class="anchor-text">Services</span>
</a>
<a class="contact-anchor" data-class="contact-anchor" href="#">
<span class="icons-wrapper">
<i class="icon-normal-state"></i>
<i class="icon-active-state"></i>
</span>
<span class="anchor-text">Contact</span>
</a>
</nav>
/* JavaScript Markup */
var anchors = $(this.cluster_navigation_class).children();
var anchor = (jQuery.inArray(data, anchors) == -1) ? anchors[0] : jQuery.inArray(data, anchors);
Where this.cluster_navigation_class is .navigation, and data is .about-anchor. The JavaScript statement above always returns -1 when I check in console, why is that happening ? Shouldn't it return the index 1 because the class exists at the index 1, or am I wrong ?
You are using inArray wrong. You are comparing a string to a list of elements. jQuery can not magically know what you want to do.
Do you realize you contrdict yourself in your post. One place you are saying checking data and next place you are saying checking class. The data and class are just repeated, so I am not sure what is the problem using either of them.
You should be using find to select the element inside of the navigation element.
var myLink = jQuery(".navigation").find('[data-class="about-anchor"]');
Another way to use filter:
var links = jQuery(".navigation a");
var activeElem = links.filter( function(){ return jQuery(this).data()==="about-anchor"; } );
var myLink = activeElem.length===1 ? activeElem : links.eq(0);
or with the class
var links = jQuery(".navigation a");
var activeElem = links.filter(".about-anchor");
var myLink = activeElem.length===1 ? activeElem : links.eq(0);