CODEWITHSUNDEEP
javascriptjquerywordpress
firefirehelphelp
firefirehelphelp

Reputation: 29

Creating a loop for javascript code

I currently have the following javascript code that is repeated 20 times in my wordpress custom code section where custom javascript codes are inputted. I was wondering if there is a way to shorten them by using a loop?

Example code 1

var href1 = jQuery('.grid-item:nth-child(5) li:nth-child(1) .item-property').html();
var link1 = "<a href='"+href1+"' target='_blank'>Join Now!</a>";
jQuery('.grid-item:nth-child(5) li:nth-child(1) .item-property').replaceWith(link1);

Example code 2

var href2 = jQuery('.grid-item:nth-child(5) li:nth-child(2) .item-property').html();
var link2 = "<a href='"+href2+"' target='_blank'>Join Now!</a>";
jQuery('.grid-item:nth-child(5) li:nth-child(2) .item-property').replaceWith(link2);

As can be seen, there is a pattern to the code and I have relabelled them as Q.

var hrefQ = jQuery('.grid-item:nth-child(5) li:nth-child(Q) .item-property').html();
var linkQ = "<a href='"+hrefQ+"' target='_blank'>Join Now!</a>";
jQuery('.grid-item:nth-child(5) li:nth-child(Q) .item-property').replaceWith(linkQ);

So I was thinking of using a loop to generate variables and then use them in the above code?

var Q;

for (Q = 1; Q < 20; i++) {

Thank you.

Upvotes: 0

Views: 72

Answers (1)

user8897421
user8897421

Reputation:

Yes you could of course use a loop, but don't.

You've asked about a solution to your solution instead of to the initial problem, which seems to be to simply replace the content of each element with a link.

So instead, use the API designed for this purpose.

jQuery('.grid-item:nth-child(5) li .item-property')
  .replaceWith(function() {
    return "<a href='" + this.innerHTML + "' target='_blank'>Join Now!</a>";
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

<div>
  <ul class="grid-item">
    <li><span class="item-property">1</span></li>
    <li><span class="item-property">1</span></li>
  </ul>
  <ul class="grid-item">
    <li><span class="item-property">2</span></li>
    <li><span class="item-property">2</span></li>
  </ul>
  <ul class="grid-item">
    <li><span class="item-property">3</span></li>
    <li><span class="item-property">3</span></li>
  </ul>
  <ul class="grid-item">
    <li><span class="item-property">4</span></li>
    <li><span class="item-property">4</span></li>
  </ul>
  <ul class="grid-item">
    <li><span class="item-property">5</span></li>
    <li><span class="item-property">5</span></li>
  </ul>
  <ul class="grid-item">
    <li><span class="item-property">6</span></li>
    <li><span class="item-property">6</span></li>
  </ul>
</div>

You didn't show your HTML, but used .html() so I guess that's what you want, though it seems odd for an href. If all that's in each element is text, then use this.textContent instead.

And of course, you don't need jQuery for this.

document.querySelectorAll('.grid-item:nth-child(5) li .item-property')
  .forEach(function(el) {
    var a = el.parentNode.insertBefore(document.createElement("a"), el);
    a.href = el.innerHTML;
    a.target = "_blank";
    a.textContent = "Join Now!";
    el.parentNode.removeChild(el);
  });

You can patch .forEach() in browsers that don't yet support it.

However, if you did use a loop, you could make it simple with template literals, but don't do this since it's horribly inefficient. It's just for informational purposes.

// Inside your loop...
var hrefQ = jQuery(`.grid-item:nth-child(5) li:nth-child(${Q}) .item-property`).html();
var linkQ = `<a href='"${hrefQ}"' target='_blank'>Join Now!</a>`;
jQuery(`.grid-item:nth-child(5) li:nth-child(${Q}) .item-property`).replaceWith(linkQ);

Upvotes: 3

Related Questions