A search a way to replace test by another value

Question

I display a part of a menu with

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

After i add a text

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

In the html code i see

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

A search a way to replace test in this html code by another value

I'm not sure what you are after, change test to something else with the same code you already have. $('a[name="usernameMenu"] span:eq(0)').after("new text"); — chungtinhlakho, Jun 03 '16 at 00:28
Updated my answer - it turned out to be trickier than I thought — blurfus, Jun 03 '16 at 01:06

J. Titus · Answer 1 · 2016-06-03T00:34:44.807

1

Maybe a hacky solution, but find and replace test:

var t = $('a[name="usernameMenu"]').html();

$('a[name="usernameMenu"]').html(t.replace('test', 'another value'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

edited Jun 03 '16 at 00:34

answered Jun 03 '16 at 00:28

J. Titus

9,535
1
32
45

test was an example... can be any other text – robert gagnon Jun 03 '16 at 00:43

score 1 · Accepted Answer · edited May 23 '17 at 12:31

If I understood correctly, you want to append a text node after the span and then later replace it with something else.

This answer gives you a way to get the next 'text' element. With that, you can assign a value like the sample code below:

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

You lose the `glyphicon-user`, much like I did with my first answer. — J. Titus, Jun 03 '16 at 00:48
Yes, just realized that... playing with the selector right now - Updated my answer - thx @J.Titus — blurfus, Jun 03 '16 at 01:05

A search a way to replace test by another value

2 Answers2