使用jQuery更改第一个span元素的文本

Question

我尝试了许多方法，但我的代码无法正常运行。我想更改此代码中包含数字的 span 元素的文本:

<li class="top">
  <div class="sec">
            <span>123</span>
            <span class="inner">Lorem</span>
    </div>
</li>

我的JavaScript/JQuery:

(function($) {
  $(document).ready(function() {
    $('li.top .sec').find('span').eq(0).text('cccc');
  });
})(jQuery);

我已经能够编写更改两个的代码，但不能更改其中一个。

- Mola221

---

使用 jQuery(function($){ ... }) 来混合前两行代码... - Jonas Wilms

您的代码似乎正常工作（123 变为 'cccc'）。您所说的“我只能获取两个span更改而不是第一个span”是什么意思？ - Daniel Beck

@Jonasw 这解决了我的问题，非常感谢，但是我还是不太明白！我能在互联网上找到相关信息吗？我应该使用哪些关键词？再次感谢！！ - Mola221

@mola221 这应该不会改变任何东西（尽管代码更易读了...），所以错误可能出现在其他地方... - Jonas Wilms

当您使用代码$('li.top .sec').find('span').eq(0).text('cccc');时，123也会更改为ccc。如果您使用此代码$('li.top .sec').find('span').eq(1).text('cccc');，则第二个span将被更改。 - Jino Shaji

刚在 JSFiddle 上尝试了一下你的代码，完美运行。不过还有几个替代方案可以选择。.find("span:eq(0)") 或 .find("span:first"); 或 .find("p").first();。你甚至可以在第一个选择器中找到 span：$('li.top .sec span:first');。 - James Douglas

Answer 1

你的代码主体看起来基本正常工作。

我刚试着按以下方式将这行插入文档中：

 $('li.top .sec').find('span').eq(0).text('cccc');

请查看http://jsbin.com/leyasiwexu/edit?html,js,output

因此，也许还有其他原因导致了这个问题？

console.log($('li.top .sec').find('span').eq(0).text());
     $('li.top .sec').find('span').eq(0).text('cccc')
console.log('changed to: ' + $('li.top .sec').find('span').eq(0).text());
     

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="top">
  <div class="sec">
            <span>123</span>
            <span class="inner">Lorem</span>
    </div>
</li>

- AnilRedshift

Answer 2

(function($) {
    $(document).ready(function() {
       $('li.top .sec').find('.inner').prev().text('cccc');
    });
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="top">
    <div class="sec">
        <span>123</span>
        <span class="inner">Lorem</span>
    </div>
</li>

.prev() 方法在 DOM 树中搜索每个元素的前一个元素，并从匹配的元素构造一个新的 jQuery 对象。

该方法可选地接受与传递给 $() 函数相同类型的选择器表达式。如果提供了选择器，则将通过测试前面的元素是否匹配选择器来过滤前面的元素。

摘自JQuery prev 文档

- user7110739

---

有人能解释一下为什么要降级吗？ - user7110739

我没有给你的帖子点踩，但是你并没有解释问题出在哪里以及如何修复它。你只提供了一段代码块。 - James Douglas

Answer 3

你可以尝试这个：

$('li.top .sec').find('.inner').prev().text('cccc');

- Fareeda

Answer 4

我还没有检查过HTML规范，但我认为在 li 中嵌套一个 div 不太合适。我知道你可以用CSS解决展示上的问题，但这可能在jQuery中不允许。就像我说的那样，我还没有验证。如果您必须在li中嵌套项目，请使用内联元素。div 是块级元素。

- Oniya Daniel

---

你可以直接阅读你提供的规范，而不是猜测。https://www.w3.org/TR/html5/grouping-content.html#the-li-element li元素可以包含“流内容”，其中包括div。 - Daniel Beck