如何从span标签更改值？

Here is html code

这是html代码

<div style="float: left; padding-top: 8px; width: 340px; overflow: hidden;" id="about_me_text_contents">    
    <b><span class="notranslate">Name</span></b>        
    <br>
    <span style="font-size:80%">Since: <span data-sl-tgtfmt="shortDate" data-sl-dtfmt="%m/%d/%y" class="SL_date">05/17/13</span></span><br>       
    <br>
    Male
    <br>    
    Age: <span class="notranslate">23</span>
    <br>        
    United States - NY
    <br>
    Last log on: <span class="notranslate"></span>
    <br>    
    <br style="line-height:12px;">
    <i id="user_tagline"><span class="notranslate">Type your tagline here</span></i>
    <br>
    <div id="aboutme_conditional_information_div">
    <div id="aboutme_gallery_div" style="line-height:12px; padding-bottom: 8px;">
        <span style="font-size:80%"><a class="see-my-albums" href="http://www.test.com">See My Albums (1)</a>
        </span>
    </div>
    </div>  
 </div>

What I'm doing here like code below but this not change the Age value number but change only something else value. Maybe I can try using <br> count. Hurm...Idk.

我在这里做的就像下面的代码,但这不会改变Age值数字,但只改变其他值。也许我可以尝试使用
count。 Hurm ... IDK。

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$('.notranslate span').html("your new string");

});//]]>  

</script>

I would like to use Jquery to change the span value of "Age: 23 to my number manually". I am somewhat new to Javascript and Jquery, so how would I change that span value without it having an id to reference.

我想使用Jquery将“年龄:23​​的跨度值”手动更改为“我的号码”。我对Javascript和Jquery有些新手,所以如果没有引用id,我将如何更改该span值。

Many thanks in advance!

提前谢谢了!

3 个解决方案

#1

Use CSS query selectors to grab the HTML element that you want to chain. You can daisy-chain selectors together to make them more specific.

使用CSS查询选择器来获取要链接的HTML元素。您可以将选择器菊花链连接在一起,使它们更具体。

For example, #about_me_text_contents would select the element with the id of "about_me_text_contents", while #about_me_text_contents span would select one or more span elements inside the element that id. To take it a step further, you could grab only the second span by using this selector: #about_me_text_contents span:nth-of-type(2)

例如,#about_me_text_contents将选择id为“about_me_text_contents”的元素,而#about_me_text_contents span将在id元素内选择一个或多个span元素。为了更进一步,您可以使用此选择器仅抓取第二个跨度:#about_me_text_contents span:nth-​​of-type(2)

As an alternative, you can be less specific in your CSS selector, grabbing an entire array of elements, then reference the one you want to use.

作为替代方案,您可以在CSS选择器中不那么具体,抓取整个元素数组,然后引用您想要使用的元素。

Decent CSS selectors references:

体面的CSS选择器引用:

• Selectors W3C Specification

选择器W3C规范

• Selectors on Mozilla.org (unofficial)

Mozilla.org上的选择器(非官方)

• CSS Selectors Reference on w3schools (unofficial)

w3schools上的CSS选择器参考(非官方)

CSS selectors can be used both by jQuery and by native JavaScript (using document.querySelector() and document.querySelectorAll() to select elements.

CSS选择器既可以由jQuery使用,也可以由本机JavaScript使用(使用document.querySelector()和document.querySelectorAll()来选择元素。

Here's a demo using your provided HTML:

这是使用您提供的HTML的演示:

var ageSpan = document.querySelector("#about_me_text_contents span:nth-of-type(2)");
/* Note that you could also do the following: */
// ageSpan = document.querySelectorAll("#about_me_text_contents span.notranslate")[1];
ageSpan.innerHTML = "A billion years old!";

<div style="float: left; padding-top: 8px; width: 340px; overflow: hidden;" id="about_me_text_contents">
  <b><span class="notranslate">Name</span></b> 
  <br>
  <span style="font-size:80%">Since: <span data-sl-tgtfmt="shortDate" data-sl-dtfmt="%m/%d/%y" class="SL_date">05/17/13</span></span>
  <br>
  <br>Male
  <br>Age: <span class="notranslate">23</span>
  <br>United States - NY
  <br>Last log on: <span class="notranslate"></span>
  <br>
  <br style="line-height:12px;">
  <i id="user_tagline"><span class="notranslate">Type your tagline here</span></i>
  <br>
  <div id="aboutme_conditional_information_div">
    <div id="aboutme_gallery_div" style="line-height:12px; padding-bottom: 8px;">
      <span style="font-size:80%"><a class="see-my-albums" href="http://www.test.com">See My Albums (1)</a>
        </span>
    </div>
  </div>
</div>

#2

The class is in the span element you need to combine those 2 selectors also since there are multiple elements with the same class you need to get the second span

该类在span元素中需要组合这两个选择器,因为有多个元素具有相同的类,您需要获得第二个跨度

$('span.notranslate').eq(1).html("your new string");

Demo: Fiddle

---

Another solution is to add a special class to the age span and use that in the selector instead of the common notranslate class like

另一个解决方案是在年龄跨度中添加一个特殊类,并在选择器中使用它而不是像常见的notranslate类

<span class="notranslate age">23</span>

then

$('span.age').html("your new string");

Demo: Fiddle

#3

Span has class name notranslate hence you need to use the selector span.notranslate. also second span element holds the value of age. you would also need to use .eq(1) to target the second span. Something like this:

Span具有类名notranslate,因此您需要使用选择器span.notranslate。第二个span元素也包含age的值。你还需要使用.eq(1)来定位第二个跨度。像这样的东西:

$('span.notranslate:eq(1)').html("new age here");