javascript - 搜索一种用另一个值替换 test 的方法

Question

我显示菜单的一部分

<li id="userInfo" role="presentation" data-toggle="tab" class="dropdown">
    <a href="#" name="usernameMenu" class="dropdown-toggle" data-toggle="dropdown" role="button">
    <span class="glyphicon glyphicon-user"></span><span class="caret"></span>
    </a>
    ...
</li>

添加文本后

$('a[name="usernameMenu"] span:eq(0)').after("test");

在我看到的html代码中

<li id="userInfo" role="presentation" data-toggle="tab" class="dropdown">
    <a href="#" name="usernameMenu" class="dropdown-toggle" data-toggle="dropdown" role="button">
    <span class="glyphicon glyphicon-user"></span>test<span class="caret"></span>
    </a>
    ...
</li>

搜索一种用另一个值替换此 html 代码中的 test 的方法

Answer 1

如果我理解正确的话，您需要在跨度之后附加一个文本节点，然后用其他内容替换它。

This answer为您提供了获取下一个“文本”元素的方法。这样，您就可以分配一个值，如下面的示例代码:

$(function() {
  $('a[name="usernameMenu"] span:eq(0)').after(" test ");
  setTimeout( function(){
    // getting the next text element done line this
    $('a[name="usernameMenu"] span:eq(0)')[0].nextSibling.nodeValue = "new TEXT"  
  }, 3000 ); // wait 3 secs before changing it
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">

Text below will change in 3 secs

<li id="userInfo" role="presentation" data-toggle="tab" class="dropdown">
  <a href="#" name="usernameMenu" class="dropdown-toggle" data-toggle="dropdown" role="button">
    <span class="glyphicon glyphicon-user"></span><span class="caret"></span>
  </a>
</li>