javascript - jQuery:.after() 导致乘法元素重复故障？

Question

基本上，我获取一个 href 值，然后采用该值，在我从中获取它的元素之后创建一个新元素，然后将 href 应用于新元素。问题是，每次我复制并粘贴此代码(一个用于 facebook，一个用于 twitter)作为共享按钮时，它都会从 2 乘以 3，显示 1 个 twitter 按钮和两个 facebook 按钮。这完全难住了我，以前从未遇到过这个问题。

$(document).ready(function () {
    $('.mm').each(function () {
        $('a', this).after('<br><a class="tw">twitter</a><br>');
        var lnk = $(this).find('a').attr('href');
        $('.tw', this).attr('href', lnk);
    });
});


$(document).ready(function () {
    $('.mm').each(function () {
        $('a', this).after('<br><a class="fb">facebook</a><br>');
        var lnk = $(this).find('a').attr('href');
        $('.fb', this).attr('href', lnk);
    });
});

代码笔:https://codepen.io/zachreynolds/pen/oEBMzz

Answer 1

这是因为您应用了 .each() 2 次。

您需要将代码合并到一个 .each() 中，如下所示:-

$(document).ready(function () {
  $('.mm').each(function () {
    var lnk = $(this).find('a').attr('href');
    $(this).find('a').after('<br><a class="tw" href="'+lnk+'">twitter</a><br><br><a class="fb" href="'+lnk+'">Facebook</a><br>');
  });
});

工作示例:-

$(document).ready(function () {
  $('.mm').each(function () {
    var lnk = $(this).find('a').attr('href');
    $(this).find('a').after('<br><a class="tw" href="'+lnk+'">twitter</a><br><br><a class="fb" href="'+lnk+'">Facebook</a><br>');
  });
});

html {
  background-color: #eee;
}
.mm{background:#ccc;margin:5px}
body {
  margin: 0 auto;
  color: #323232;
  max-width: 100%;
  line-height: 1.5;
  padding: 1em 3em;
  background-color: #fff;
  font-family: 'Roboto', serif;
}
 
h1 {line-height: 2;}
p{ font-size: 1.2em;}
pre {
  padding: .5em;
  color:#bada55; /* bright green */
  display: block;
  border-radius: 0.3em;
  font-size:1em;
  background-color: #000;}
  
}
code {
  background-color: #eee;
  font-size:.25em;
  font-family:verdana;
}
a:link {color:#DB2929;text-decoration:underline;}
a:visited{color:green;text-decoration:none;}
a:hover{color:green;}
a:active{color:red;}

.tw,.fb{width:100px;height:33px;padding:7px;}
.tw {background:#09f}
.fb {background:#46a}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cc-m-8497708420" class="j-module n j-rss ">
  <div class="rssFeed">
    <h3><a href="https://www.reddit.com/r/sustainability/top/.rss?sort=top&amp;t=week&amp;limit=5" target="_blank">sustainability</a></h3>
    <div class="mm">
      <span class="rssFeedTitle j-rss-feed-title">Trees that helped save America's farms during the Dust Bowl are now under threat</span><br><br>
      <a href="https://www.reddit.com/r/sustainability/comments/7vqzku/trees_that_helped_save_americas_farms_during_the/" target="_blank">&gt;&gt; Read More</a><br><br>
    </div>
    <div class="wrappedtext">(Tue, 06 Feb 2018)</div>
    
    <div class="mm">
      <span class="rssFeedTitle j-rss-feed-title">Can Money Grow on Trees? Across the world, businesses are making money by restoring forests and farmland.</span><br><br>
      <a href="https://www.reddit.com/r/sustainability/comments/7vx4qu/can_money_grow_on_trees_across_the_world/" target="_blank">&gt;&gt; Read More</a><br><br>
    </div>
    <div class="wrappedtext">(Wed, 07 Feb 2018)    </div>
  </div>
</div>