使用jQuery更改第一个跨度的文本

Question

我已经尝试了很多方法，但是我无法使代码正常工作。 我想更改此代码中包含数字的跨度文本：

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

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

Answer 1

 (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文档

Answer 2

您的代码主体似乎在很大程度上起作用。

我只是尝试将此行插入到文档中，如下所示：

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

参见http://jsbin.com/leyasiwexu/edit?html,js，输出

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

 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> 

Answer 3

您可以尝试以下方法：

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

Answer 4

我没有检查， HTML规格 ，但我不认为它适合筑巢一个div内li 。 我知道您可以使用CSS解决呈现不规则的问题，但是jQuery可能不允许这样做。 就像我说的，我还没有验证。 如果必须在li 内嵌套项目，请使用内联元素。 div是块