Update href text value dynamically using JQuery

Question

There are href links on the page, its text is not complete. for example page is showing link text as "link1" however the correct text should be like "link1 - Module33". Both page and actual texts starts with same text (in this example both will starts with "link1"). I am getting actual text from JSON object from java session and comparing. If JSON text starts with page text (that means JSON text "link1 - Module33" startsWith "link1" (page text), then update "link1" to "link1 - Module33".

Page has below code to show the links

<div class="display_links">
 <ul id="accounts_links_container">
  <li id="accounts_mb_2_id"><a href="javascript:void(0)" class="linksmall" 
    id="accounts_mb_2_a"> link1 </a></li>
  <li id="accounts_mb_11_id"><a href="javascript:void(0)" class="linksmall" 
   id="accounts_mb_11_a"> link2 </a></li>
    .
    .
    .
// more links
 </ul>
</div>

Note : li id is not static its different for each page text, however ul id is static.

I am reading correct & full link text from JSON object (from java session) as below

var sessionValue = <%= json %>; // taken from String array

and reading page text as below :-

$('.display_links li').each(function() { pageValue.push($(this).text()) });

sessionValue has correct updated text and pageValue has partial texts. I am comparing using below code

for(var s=0; s<pageValue.length; s++) {                
             var pageLen = $.trim(pageValue[s]).length;               
            for(var w=0; w<sessionValue.length; w++) {
                   var sesstionLen = $.trim(sessionValue[w]).length;                   
                  var newV = sessionValue[w].substring(0, pageLen);
                  if($.trim(newV)==$.trim(pageValue[s])){
                  **// UPDATING VALUES AS BELOW** 
                   pageValue[s]=sessionValue[w];             
                  }
             }
         }

I am trying to update page value text to session value text as pageValue[s]=sessionValue[w]; (in above code) but its not actually updating the values. Sorry for the poor comparing text logic. Please help, how to update it dynamically in the loop after comparing to make sure I am updating the correct link text.

the partial text you are referring is the value of the anchor tag? link1 etc. — masterpreenz
– masterpreenz, Commented Sep 3, 2017 at 11:11

T.J. Crowder · Accepted Answer · 2017-09-03 12:51:49Z

2

pageValue[s]=sessionValue[w]; just updates the array; it has no effect whatsoever on the li's text.

If you want to update the li's text, you need to do that in your each. Here's an example doing that, and taking a slightly more efficient approach to the comparison:

$('.display_links li a').each(function() {
    var $this = $(this);
    var text = $.trim($this.text());
    var textLen = text.length;
    for (var w = 0; w < sessionValue.length; ++w) {
        var sessionText = $.trim(sessionValue[w]);
        if (sessionText.substring(0, textLen) == text) {
            text = sessionText;
            $this.text(text);
            break; // Found it, so we stop
        }
    }
    pageValue.push(text); // If you want it for something
});

edited Sep 3, 2017 at 12:51

answered Sep 3, 2017 at 11:13

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

rakesh_parashar Over a year ago

Thanks @T.J. Crowder After trying I am getting below code without link on it <div class="display_links"> <div class="display_links"> <ul id="accounts_links_container"><li id="accounts_mb_14_id">link1 - Module33</li></ul> </div> However I am expecting to get below with link <ul id="accounts_links_container"><li id="accounts_mb_14_id"><a href="javascript:void(0)" class="linksmall" id="accounts_mb_14_a">link1 - Module33</a></li> </ul> </div>

T.J. Crowder Over a year ago

@Rakesh: The selector for the each should be '.display_links li a', not just '.display_links li'. Fixed above.

jconder · Accepted Answer · 2017-09-03 11:23:52Z

1

I think it's cleaner to just select the elements you care about (in this case the anchor tags) and then use built-in functionality to compare rather than reimplementing a startsWith function.

var sessionValue = ['link1 - Module33', 'link2 - foobar'];

$('.display_links li a').each(function() {
  var $this = $(this);
  var text = $this.text().trim();
  sessionValue.forEach(function(sessionValue) {
    if (sessionValue.startsWith(text)) {
      $this.text(sessionValue);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="display_links">
 <ul id="accounts_links_container">
  <li id="accounts_mb_2_id"><a href="javascript:void(0)" class="linksmall" id="accounts_mb_2_a"> link1 </a></li>
  <li id="accounts_mb_11_id"><a href="javascript:void(0)" class="linksmall" id="accounts_mb_11_a"> link2 </a></li>
 </ul>
</div>

answered Sep 3, 2017 at 11:23

jconder

7464 silver badges11 bronze badges

3 Comments

rakesh_parashar Over a year ago

Thanks @jconder It worked perfectly for me, also getting the link on updated text

rakesh_parashar Over a year ago

I observed this code is working fine on chrome and firefox but not on IE, any tips for this to work in IE as well?

jconder Over a year ago

startsWith isn't supported by IE, but you can include a polyfill to make it work: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

Sam R · Accepted Answer · 2017-09-03 11:16:49Z

The result of $(this).text() is a primitive string, not a reference to the textNode of the element. It doesn't matter if you update pageValue, because it is not related to the original element.

Instead of pushing the strings to an array to process, you can stay inside the $.each() loop and still have access to the elements, which is needed to update the text. Something like this:

 $('.display_links li').each(function() {
    var $li = $(this);
    var liText = $.trim($li.text());
    var liLen = liText.length;  

    for(var w = 0; w < sessionValue.length; w++) {
        var sessionLen = $.trim(sessionValue[w]).length;                   
        var newV = sessionValue[w].substring(0, liLen);

        if ($.trim(newV) === liText) {
            **// UPDATING VALUES AS BELOW** 
            $li.text(sessionValue[w]);             
        }
    }
});

user8554832 · Accepted Answer · 2017-09-03 13:38:17Z

I am a noob and thought I would take a shot at this. Here is my approach although the sessionValue array is a bit foggy to me. Is the length undetermined?

I declared var's outside of the loop for better performance so they are not declared over and over.

Iterate through elements passing each value through Compare function and returning the correct value and update immediately after all conditions are satisfied.

var i = 0;

$('.display_links li a').each(function(i) {

  $(this).text(Compare($(this).text(), sessionValue[i]));
  i++;

});

var Compare;
var update;

  Compare = function(val1, val2) {
  // Check if val1 does not equal val2 and see if val2 exists(both must be true) then update.
  if(!val1 === val2 || val2) {
        update = val2
  }
  return update;
}

Collectives™ on Stack Overflow

Update href text value dynamically using JQuery

4 Answers 4

2 Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related