We Keep Coding

Compare tag text value with a variable in jquery

I'm trying to compare the value of a tag obtained by query selector in the DOM with a given variable.
So far I've only managed the use of "contains" function, but I need to compare with an equality function.
The DOM element I need to obtain is "span:badge" and the variable to compare is "current_id".
This is the code I need to change:
var $a = $('span.badge:contains("' + current_id + '")').closest('a');
JS:
$(document).ready(function() {
"use strict";
var current_id = window.location.pathname.replace('/califications/','');
if (Number.isInteger(parseInt(current_id, 10))){
var $a = $('span.badge:contains("' + current_id + '")').closest('a');
$($a).addClass('active');
}else{
$('#middle_column > div > h1').html("No kid selected");
}
});
HTML:
<ul class="nav nav-pills flex-column" id="kid_list">
<t t-foreach="kids" t-as="kid">
<li class="nav-item">
<a t-attf-href="/califications/{{kid.id}}" t-attf-class="nav-link"><t t-esc="kid.name"/>
<span class="badge badge-pill float-right" style="display: none;"><t t-esc="kid.id" /></span>
</a>
</li>
</t>
</ul>
Thanks for reading!

To use contains seems right, but you need to do further, because contains also matches aa and ab if you search for a.
const $badges = $('span.badge:contains(`${current_id}`)');
const targetEl = null
$badges.each((i, e)=>{
if(e.text() === current_id){
targetEl = e.
}
})
targetEl should be what you need, or you will also do targetEl.closet("a") if you want to get the a.

You can use the selector which contains t-attf-href attribute ends with the id
$(`[t-attf-href$="${current_id}"]`).addClass('active');
Example:
var id = 'kid_id';
$(`[t-attf-href$="${id}"]`).addClass('active').text('test');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a t-attf-href="/califications/kid_id" t-attf-class="nav-link"><t t-esc="kid.name"/>
<span class="badge badge-pill float-right" style="display: none;"><t t-esc="kid.id" /></span>
</a>
Note: The .text('test') part is just for testing

Solution of the problem found.
var current_id = window.location.pathname.replace('/califications/','');
if (Number.isInteger(parseInt(current_id, 10))){
var $b = $('span.badge');
$b.each(function( index ) {
var badge_value = $( this ).text();
if (badge_value == current_id){
var active_a = $( this ).closest('a');
$(active_a).addClass('active');
}
});
}else{
$('#middle_column > div > h1').html("No kid selected");
}
Thanks for all the responses!

Using jQuery .each() to read any html value and change it

I want to use the jQuery function .each() to apply a possible change to a value.
I have a bunch of labels in tags with a class="temp". If I have a switch to switch between Celsius and Fahrenheit I would like to update all html elements with the temp class. I will retrieve the value from the span, then update the span to have the new temperature.
Span tags look like
<span class=​"temp" id=​"holder_1443531366" style=​"text-align:​center;​ display:​inline-block;​">​<span style>​86.1​</span>
​<span style=​"padding-left:​3px;​">​°F​</span>​
</span>​
Im sure this isnt the best looking html element, i didnt make it, im using a website to build a web dashboard and cannot actually change these directly.
There is other parts to this code, but I just need the main part working.
//Find all elements with span class="temp"
var temps = [];
var html;
var pHtml;
temps = jQuery('.temp').toArray();
html = jQuery('.temp').html();
//pHtml = jQuery('.temp').parseHTML();
if(temps != null){
console.log("Temps -> "+temps.length);
console.log("html -> "+html);
for(var i = 0; i < temps.length; i++){
console.log(temps[i]);
}
}else {
console.log("No temps found");
}
I have currently two elements to find and this is the output so far
Attempting to find temp classes
Temps -> 2
html -> <span style="">86.0</span><span style="padding-left:3px;">°F</span>
<span class=​"temp" id=​"holder_1443531366" style=​"text-align:​center;​ display:​inline-block;​">​<span style>​86.1​</span>​<span style=​"padding-left:​3px;​">​°F​</span>​</span>​
<span class=​"temp" id=​"holder_1443531376" style=​"text-align:​center;​ display:​inline-block;​">​<span style>​85.38​</span>​<span style=​"padding-left:​3px;​">​°F​</span>​</span>​
I save each element with the ".temp" class, find the temp (86.1) and then use that value to execute my temp converter function (or just some math right there).
With the new value, I will update the element from 86.1 -> the Celsius temp i just calculated.

what this code does, is that on click of the link, it cycles through each element with class .temp and gets the .degrees, converts that to Celsius, and then changes the F to a C.
i added classes on both spans to accomplish this (.degrees and .degType)
$(document).ready(function() {
$('.toC').on('click', function() {
$('.temp').each(function() {
var degrees = $(this).find('.degrees').html();
var cTemp = (parseFloat(degrees - 32) * (parseFloat(5/9))).toFixed(1);
$(this).find('.degrees').html(cTemp);
$(this).find('.degType').html('°C');
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="temp" id="holder_1443531366" style="text-align:center; display:inline-block;"><span class="degrees">86.1</span>
<span class="degType" style="padding-left:3px;">°F</span>
</span>
<br/><br/>
<span class="temp" id="holder_1443531366" style="text-align:center; display:inline-block;"><span class="degrees">212</span>
<span class="degType" style="padding-left:3px;">°F</span>
</span>
<br/><br/>
<a class="toC" href="#">to Celcius<a/>

Here's a way to toggle back and forth
$('a').click(function () {
$('span.temp').each(function () {
if ($(this).find('span:last').text() == '°F') {
$(this).find('span:last').text('°C');
$(this).find('span:first').text(parseFloat((($(this).find('span:first').text() - 32) * 5) / 9).toFixed(2))
} else {
$(this).find('span:last').text('°F');
$(this).find('span:first').text(parseFloat((($(this).find('span:first').text() * 9) / 5) + 32).toFixed(2))
}
})
$(this).text($(this).text() == 'switch to Fahrenheit' ? 'switch to Celsius' : 'switch to Fahrenheit')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span class="temp" id="holder_1443531366" style="text-align:center; display:inline-block;">
<span style>86.1</span>
<span style="padding-left:3px;">°F</span>
</span>
<span class="temp" id="holder_1443531367" style="text-align:center; display:inline-block;">
<span style>212</span>
<span style="padding-left:3px;">°F</span>
</span>
switch to Celsius

Try using .find() to filter first span , .html(function(index, html){}) to convert Fahrenheit to Celsius , select next span to change F to C
$(".temp").each(function(index, el) {
$(this).find("span:first").html(function(_, temp) {
return ((temp - 32) * 5/9).toFixed(2)
}).next("span").html(function(_, sym) {
return sym.slice(0,1) + "C"
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<span class="temp" id="holder_1443531366" style= "text-align:​center;display:inline-block;"><span style>86.1</span><span style="padding-left:3px;">°F</span></span>
<span class="temp" id="holder_1443531376" style= "text-align:center;display:inline-block;"><span style>85.38</span><span style="padding-left:3px;">°F</span></span>

I've made a working example and tested it to be working
http://jsfiddle.net/a2dax16t/
I've created a sample set of spans as you did, but added a button to trigger the function:
<span class="temp" id="holder_1443531366" style="text-align:center;display:inline-block;">86.1</span>
<br/>
<span class="temp" id="holder_1443531366" style="text-align:center;display:inline-block;">99</span>
<br/>
<span class="temp" id="holder_1443531366" style="text-align:center;display:inline-block;">102</span>
</span>
<br/>
<button id="btnCelsius">Convert</button>
and here is my function:
$(function () {
$("#btnCelsius").click(function () {
$(".temp").each(function () {
var newValue = $(this).html();
$(this).html(toCelsius(newValue));
});
});
});
function toCelsius(f) {
return (5 / 9) * (f - 32);
}
as you can see, I've created a function to convert to celsius, and used it inside the each() function, and tested it and it's working.
please give it a try and let me know if this is what you want or that you need any extra modifications.

How to use ClassName add entries to a DIV

HTML source:
<span class="specLink">
<specialty><a title="Plastic Surgery" href="link2.aspx">Plastic Surgery</a></specialty>
</span>
<br />
<span class="specLink">
<specialty2><a title="Hand Surgery" href="link3.aspx">Hand Surgery</a></specialty2>
</span>
How can I create a JQuery script which runs during page load to displays the same list taking from the HTML Source listed above?
E.g.:
<div class="justPad">
<a title="Plastic Surgery" href="link2.aspx" class="defaultLinks">Plastic Surgery</a>
</div>
<div class="justPad">
<a title="Hand Surgery" href="link3.aspx" class="defaultLinks">Hand Surgery</a>
</div>
How I would like it to be:
var k = "";
$(".specLink").each(function() {
var aLink = $(".specLink").replace(<%-- Remove the <specialty#></specialty#> tags and only keep the anchor link --%>);
k += '<div class="justPad">'; //.. as many entries that shows up
k += aLink; //.. as many entries that shows up
k += '</div>'; //.. as many entries that shows up
});
//Once I have added
$(".addSpecialties").html(k);
Blank HTML:
<div class="serviceHolder brClear addSpecialties">
//add inside here from the JQuery above
</div>

Something like:
var specialties = $(".specLink a").map(function() {
return $('<div class="justPad">').append( $(this).clone() )[0];
}).toArray();
$(".addSpecialties").empty().append(specialties);

jQuery click function for <ul><li> elements

I have a unordered list looking like this:
<ul id="frozen" data-name="nameOfSelect" class="tagit">
<li class="tagit-choice" tagvalue="2" style="padding-right: 4px;" id="tag-2">
<div class="tagit-label" data-value="2">kázeň</div>
</li>
<li class="tagit-choice" tagvalue="1" style="padding-right: 4px;" id="tag-1">
<div class="tagit-label" data-value="1">žalmxxxx</div>
</li>
</ul>
I need to bind an click function to all of them and get the data of the id="tag-1" to be used in the function.
I have tried this:
$('#[id|="tag"]').each(function(){
var tag = this.attr('id');
var tagID = tag.replace('tag-','');
this.click(function (){
alert('index.php?s=taglist&tag=' + tagID);
//window.location = string;
});
});
However, for some reason it seems that this approach is wrong for the <li> element as I am having problems with the selector (it seems). Maybe I am also missing something stupid... Any ideas?

No need for a loop, jQuery does this internally, and this is a native DOM element, which has an id property, but no attr() method :
$('[id^="tag-"]').on('click', function() {
var tag = this.id,
tagID = tag.replace('tag-', '');
alert('index.php?s=taglist&tag=' + tagID);
});

jQuery code to delete all spans with same content but keep one

Say i have the following html:
<span class="fruit">Apple</span>
<span class="fruit">banana</span>
<span class="fruit">Apple</span>
<span class="fruit">Apple</span>
<span class="fruit">orange</span>
I tried different methods but it didn't work, I want a jQuery code to remove all (.fruit) spans with same content but keep one (the first if possible), so i will end up with the following:
<span class="fruit">Apple</span>
<span class="fruit">banana</span>
<span class="fruit">orange</span>
Thank you

$("span.fruit:contains(Apple):not(:first)").remove();

$('span.fruit').each(function(){
return $('span.fruit:contains('+$(this).text()+'):not(:first)').remove();
})

var temp = array[];
$(".fruit").each(function(i) {
var html = $($this).html();
if($.inArray(html, temp)) {
$($this).remove();
}
else {
temp.push(html);
}
});

temp = $('span:first').clone(true);
//remove all the span
$().html();
$().append(temp);