Question

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

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

＆＃13;

jQuery('.grid-item:nth-child(5) li .item-property')
  .replaceWith(function() {
    return "<a href='" + this.innerHTML + "' target='_blank'>Join Now!</a>";
  });

＆＃13;

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

＆＃13;

您没有显示自己的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);

为javascript代码创建循环

1 个答案: