javascript - 为 JavaScript 代码创建循环

Question

我目前有以下 JavaScript 代码，在输入自定义 JavaScript 代码的 WordPress 自定义代码部分中重复了 20 次。我想知道是否有办法通过使用循环来缩短它们？

示例代码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);

示例代码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);

可以看出，代码中有一个模式，我已将它们重新标记为 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);

所以我正在考虑使用循环来生成变量，然后在上面的代码中使用它们？

var Q;

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

谢谢。

Answer 1

是的，您当然可以使用循环，但不要这样做。

您询问了解决方案的解决方案，而不是最初的问题，这似乎只是用链接替换每个元素的内容。

因此，请使用为此目的设计的 API。

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>

您没有显示 HTML，而是使用了 .html()，所以我猜这就是您想要的，尽管对于 href 来说这似乎很奇怪。如果每个元素中的所有内容都是文本，则使用 this.textContent 代替。

<小时/>

当然，您不需要 jQuery。

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

您可以patch .forEach()在尚不支持它的浏览器中。

<小时/>

但是，如果您确实使用了循环，则可以使用模板文字使其变得简单，但不要这样做，因为它是效率极低。仅供引用。

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