добавление новых подзадач div в task div с помощью jquery

Question

это еще одно сообщение, связанное с тем же приложением, которое я разрабатываю. У меня есть определенные задачи div, которые создаются встраиваемым ruby ​​в html-файл, поэтому, взяв задачу из моего db, при каждой задаче создается новый div с id = «задачами». Теперь эти задачи включают в себя подзадачи hav и кнопку добавления, чтобы добавить подзадачу. Теперь мне нужно, чтобы при нажатии кнопки добавления она должна добавляться новую p id = "подзадачу", но только в этом контейнере задач, на который была нажата кнопка добавления. Теперь он добавляет к первому контейнеру задачи, независимо от того, нажимаю ли я на вторую задачу или третью задачу. Я добавляю новые подзадачи динамически с помощью jquery.

Вот код, который я использую

<div class="user span9 default-skin"> 
<ul> 
    <% if @project.tasks.any? %> 
     <% @project.tasks.each do |task| %> 

     <div class="span5" id="tasks"> 
      <div id="addtaskdiv"> 

      <p><b><%=task.taskname %></b> 
      <%=link_to 'edit name',edit_task_path(task) %></p> 

      <% task.subtasks.each do |subtask| %> 


       <p id="subtask" data-toggle="modal" data-target="#myModal"><%=subtask.name %></p> 
       <%end%> 

       <%=render 'layouts/modal' %> 
       </div> 

       <p id="addcard"><a href="#">Add a card...</a></p> 
     </div> 

    <%end%> 
<%end%> 


</ul> 


</div> 

и вот JQuery код, который добавляет новый P ID = «подзадачи»

$("#addcard > a").click(function(){ 
    $('#addtaskdiv').append("<p id='subtask'></p>"); 
    }); 

Answer 1

Первое, с кодом, который показывает задачи перечислите, что у вас больше div элементов с одинаковыми ID на странице, это неправильно, id должен быть уникальным, у вас может быть больше div элементов с одинаковыми class не id.

так что вам нужно сделать smoethig так:

<div class="span5" id="tasks_<%= task.id %>"> 

, что будет что-то вроде:

<div class="span5" id="tasks_5"> 
... 
<div class="span5" id="tasks_6"> 
... 
<div class="span5" id="tasks_7"> 
... 

то же самое для addtaskdiv и addcard дивы.

, имеющий различные идентификаторы, вы сможете получить уникальный элемент на странице с jQuery, чтобы добавить <p id='subtask'></p> в нужный элемент по ID. Прямо сейчас, это связано с тем, что у вас есть все они с одинаковым идентификатором, и он добавляется к первому найденному.

$("#addcard_5 > a").click(function(){ 
    $('#addtaskdiv_5').append("<p id='subtask'></p>"); 
}); 

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

Update

как будет у получить идентификатор карты в JQuery?

<a href="#" data-id='<%= task.id %>'>Add a card...</a> 

Виль генерировать HTML: <a href="#" data-id='5'>Add a card...</a> и JQuery код будет выглядеть примерно так:

$('a').click(function(){ 
    $('#addtaskdiv_' + $(this).data('id')).append("<p id='subtask'></p>"); 
}); 

Answer 2

от поведения он появляется у вас есть повторяющиеся идентификаторы в йот. поэтому, пожалуйста, держите общее имя класса, а не дайте id. Затем, используя имя класса, должен быть ваш код.

$(".addcard > a").click(function(){ 
    $(this).closest('.addtaskdiv').append("<p id='subtask'></p>"); 
    });