Question

这是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>

我在这里做的就像下面的代码一样，但是这不会改变Age值，但只改变其他值。也许我可以尝试使用<br>计数。 Hurm ... IDK。

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

});//]]>  

</script>

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

非常感谢提前！

Answer 1

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

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

演示：Fiddle

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

这样的常见notranslate类

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

然后

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

演示：Fiddle

Answer 2

Span的类名为notranslate，因此您需要使用选择器span.notranslate。第二个span元素也包含age的值。您还需要使用.eq(1)来定位第二个范围。像这样：

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

Answer 3

使用CSS查询选择器来获取要链接的HTML元素。您可以将选择器串联起来以使它们更具体。

例如，#about_me_text_contents会选择ID为＆＃34; about_me_text_contents＆＃34;的元素，而#about_me_text_contents span会选择ID中元素内的一个或多个span元素。为了更进一步，您可以使用此选择器仅抓取第二个范围：#about_me_text_contents span:nth-of-type(2)

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

体面的CSS选择器引用：

Selectors W3C Specification
Selectors on Mozilla.org（非正式）
CSS Selectors Reference on w3schools（非正式）

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

以下是使用您提供的HTML的演示：

＆＃13;

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!";

＆＃13;

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

＆＃13;

如何从span标签更改值？

3 个答案: