У меня есть динамически сгенерированный список, вот мой HTML-код

<ol class="pending">
  <li><a href="#" class="rendered">One</a></li>
  <li><a href="#" class="rendered">Two</a></li>
  <li><a href="#" class="rendered">Three</a></li>
  <li><a href="#" class="rendered">Four</a></li>
  <li><a href="#" class="rendered">Five</a></li>
  <li><a href="#" class="rendered">Six</a></li>
</ol>
<ol class="patched"></ol>

Когда нажимается какая-либо конкретная ссылка, она должна перемещаться в другой список.

/*jslint browser: true*/ /*global  $*/ 
$(document).ready(function(){
    "use strict";
    $('.rendered').on('click', function(){
        $(this).toggleClass("rendered patched");
        //$(this).parent().append($(this).wrap("<li></li>"));
        $(this).appendTo("ol.patched");
    });
});

Пока единственная трудность заключается в добавлении значения привязки в

  • в новый список как
  • .

    В результате я получаю

    <ol class="pending">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ol> 
    <ol class="moved">
      <a href="#" class="dld">One</a>
      <a href="#" class="dld">Two</a>
      <a href="#" class="dld">Three</a>
      <a href="#" class="dld">Four</a>
      <a href="#" class="dld">Five</a>
      <a href="#" class="dld">Six</a>
    </ol>
    

    Я не уверен, что неправильно понимаю насчет .append() и .appendTo()

    0
    Ken Ingram 16 Дек 2016 в 08:06
  • 1 ответ

    Лучший ответ

    Вы должны выбрать родительский элемент привязки и добавить его в ol. JQuery .parent() выберите родительский элемент элемента.

    $('.rendered').on('click', function(){
        $(this).toggleClass("rendered patched");
        $(this).parent().appendTo("ol.patched");
    });
    
    $('.rendered').on('click', function(){
      $(this).toggleClass("rendered patched");
      $(this).parent().appendTo("ol.patched");
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <ol class="pending">
      <li><a href="#" class="rendered">One</a></li>
      <li><a href="#" class="rendered">Two</a></li>
      <li><a href="#" class="rendered">Three</a></li>
      <li><a href="#" class="rendered">Four</a></li>
      <li><a href="#" class="rendered">Five</a></li>
      <li><a href="#" class="rendered">Six</a></li>
    </ol>
    <ol class="patched"></ol>

    Также вы можете написать свой код в одну строку

    $('.rendered').on('click', function(){
      $(this).toggleClass("rendered patched").parent().appendTo("ol.patched");
    });
    
    1
    Mohammad 16 Дек 2016 в 08:09