JQuery - 如何使用生成的div和<select>标记

Question

我必须做一些表格并用它们生成div，但这不是我的问题。 实际上，我想知道如何在这个生成的div之间创建类似层次结构的东西，主要的actor将是＆lt; select＆gt;标签。 这是我想要的图像。例如，当我创建一个章节并将其与之前生成的Book 1相关联时，该章节将附加在右侧“book”div中。或者另一个例子，如果我想创建一个特定的Line块。我希望它在右边的章节中阻止自己。 我不知道我是否非常清楚和准确，但这是我在Fiddle的实际代码：https：//jsfiddle.net/Uxrieg/hctr0xbh/16/ 我目前的Jquery脚本： $（ “＃选择”）。改变（函数（）{     var val = $（this）.val（）;     $（“＃select-choice＆gt; div”）。hide（）;     $（“。”+ val）.slideToggle（）; }）;    $（ '＃createBook'）。点击（函数（）{   var listItem = $（'＃bookName'）。val（）;   var clearButton = $（'＆lt; button value =“x”id =“clear”＆gt;＆lt; / button＆gt;'）;   //console.log(listItem）;   $（'＃list'）。append（'＆lt; div class =“BookName”＆gt;'+ listItem +'＆lt; input type = button class =“item”value = X /＆gt;'+'＆lt; / div＆gt ;'）;   $（'＃bookName'）。val（''）; }）;  $（ '＃createChapter'）。点击（函数（）{   var listItem = $（'＃chapterName'）。val（）;   var clearButton = $（'＆lt; button value =“x”id =“clear”＆gt;＆lt; / button＆gt;'）;   //console.log(listItem）;   $（'＃list'）。append（'＆lt; div class =“ChapterName”＆gt;'+ listItem +'＆lt; input type = button class =“item”value = X /＆gt;'+'＆lt; / div＆gt ;'）;   $（'＃chapterName'）。val（''）; }）; $（ '＃createLine'）。点击（函数（）{   var listItem = $（'＃lineName'）。val（）;   var clearButton = $（'＆lt; button value =“x”id =“clear”＆gt;＆lt; / button＆gt;'）;   //console.log(listItem）;   $（'＃list'）。append（'＆lt; div class =“LineName”＆gt;'+ listItem +'＆lt; input type = button class =“item”value = X /＆gt;'+'＆lt; / div＆gt ;'）;   $（'＃lineName'）。val（''）; }）; $（document）.on（'click'，'。BookName'，function（）{   //console.log('clicked'）;   $（这）一个.remove（）; }）; $（document）.on（'click'，'。Chapter Chapter'，function（）{   //console.log('clicked'）;   $（这）一个.remove（）; }）; $（document）.on（'click'，'。LineName'，function（）{   //console.log('clicked'）;   $（这）一个.remove（）; }）; 如果您能解决我的问题或者只是帮助我，请提前多多谢谢。祝你有美好的一天 ！ =）

Answer 1

您只需要将追加调用中的选择器更改为章节和行：

$('.BookName', '#list').append('<div class= "ChapterName">' + listItem +'<input type=button class="item" value=X />' + '</div>');

$('.ChapterName', '#list').append('<div class= "LineName">' + listItem +'<input type=button class="item" value=X />' + '</div>');

请记住，如果没有创建书籍，那么添加章节/行不会做任何事情，如果没有创建章节，那么添加行不会做任何事情。此代码将在所有已打开的书籍中创建新章节，或在所有创建的章节中创建新行。如果您需要更具体，那么您需要添加更多逻辑并更改您的选择器。

有关jquery选择器的更多信息，请访问：https://api.jquery.com/category/selectors/