使用jQuery .each()读取任何html值并更改它

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

本文关键字：html 任何 each jQuery 读取 使用      更新时间：2023-09-26

我想使用jQuery函数。each()来应用一个可能的改变值

我有一堆标签在标签class="temp"。如果我有一个切换摄氏度和华氏度之间的切换，我想更新所有的html元素与temp类。我将从span中检索值，然后更新span以获得新的温度。

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>​

我确定这不是最好看的html元素，我没有做，我用一个网站来建立一个web仪表板，实际上不能直接改变这些

这段代码还有其他部分，但我只需要主要部分工作。

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

我目前有两个元素要查找，这是到目前为止的输出

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>​

我用"。类，找到Temp(86.1)，然后使用该值执行我的Temp转换函数(或者只是一些数学运算)。有了这个新值，我将把元素从86.1更新为刚才计算的摄氏温度。

这段代码的作用是，在点击链接时，它循环遍历具有.temp类的每个元素并获得.degrees，将其转换为摄氏度，然后将F更改为c。

我在两个跨度上添加了类来完成这个(.degrees和.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/>

这是一个来回切换的方法

$('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>
<a href="#">switch to Celsius</a>

尝试使用.find()来过滤第一个span, .html(function(index, html){})将华氏度转换为摄氏度，选择下一个span将F更改为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>

我已经做了一个工作的例子，并测试了它的工作

http://jsfiddle.net/a2dax16t/

我已经像您一样创建了一个示例集，但是添加了一个按钮来触发这个函数: 
<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>

，下面是我的函数:

    $(function () {
    $("#btnCelsius").click(function () {
        $(".temp").each(function () {
            var newValue = $(this).html();
            $(this).html(toCelsius(newValue));
        });
    });
});
function toCelsius(f) {
    return (5 / 9) * (f - 32);
}
如您所见，我创建了一个函数来转换为摄氏温度，并在each()函数中使用它，并对其进行了测试，它正在工作。

请试一试，如果这是你想要的，或者你需要任何额外的修改，请告诉我。

相关文章：