якорный тег добавляется несколько раз к дочернему тегу

Question

У меня есть следующий HTML-код с изображениями, встроенными в ссылки. Я пытаюсь добавить ахор-тег в div, однако якорные теги добавляются несколько раз. это мой код оригинал

<div id="Banner" style="display: block; position: relative;">
<div id="Settings" style="height: auto; width: 100%;"></div>
<div >
 <a href="/id=10052&;way=ban">
  <img src="/hours.jpg">
 </a>
</div>
<div>
<a href="/id=10220&amp;way=ban">
 <img src="/rq.jpg">
</a>
</div>
</div>

теперь я пытаюсь добавить в другой тег привязки, как следует ожидаемый результат

<div id="Banner" style="display: block; position: relative;">
    <div id="Settings" style="height: auto; width: 100%;"></div>
    <div >
     <a href="#" class="previous"></a>  // tag to come in
     <a href="/id=10052&;way=ban">
      <img src="/hours.jpg">
     </a>
    </div>
    <div>
    <a href="#" class="previous"></a>  // tag to come in
    <a href="/id=10220&amp;way=ban">
     <img src="/rq.jpg">
    </a>
    </div>
    </div>

это мой код я попробовал

var container = $($('#Banner').children('div'));
var previous = $('<a href="#" class="previous">');
previous.appendTo(container);

и это то, что происходит

<div id="Banner" style="display: block; position: relative;">
    <div id="Settings" style="height: auto; width: 100%;"></div>
    <div >
     <a href="#" class="previous"></a>  // tag to come in
    <a href="#" class="previous"></a> //added multiple times
   <a href="#" class="previous"></a>
   <a href="#" class="previous"></a>
   <a href="#" class="previous"></a>
     <a href="/id=10052&;way=ban">
      <img src="/hours.jpg">
     </a>
    </div>
    <div>
    <a href="#" class="previous"></a>  // tag to come in
   <a href="#" class="previous"></a>
 <a href="#" class="previous"></a>  //added multiple times
 <a href="#" class="previous"></a>
 <a href="#" class="previous"></a>
 <a href="#" class="previous"></a>
 <a href="#" class="previous"></a>
 <a href="#" class="previous"></a>
 <a href="#" class="previous"></a>
    <a href="/id=10220&amp;way=ban">
     <img src="/rq.jpg">
    </a>
    </div>
    </div>

он продолжает добавлять тег несколько раз. что я делаю не так?

Answer 1

Я чувствую, что ваша функция повторяется. Таким образом, вы можете установить простую проверку, чтобы убедиться, что это сделано только один раз:

var container = $('#Banner').children('div');
var previous = $('<a href="#" class="previous">');
// Check if element already exists before appending.
if (container.find(".previous").length === 0)
  previous.appendTo(container);

Таким образом, он проверяет, существует ли элемент DOM, прежде чем добавить. Я действительно чувствую, что большая картина нуждается в некотором изменении, но для этого случая это решение должно сработать.