jQuery使用类将<li>标记附加到<ul>标记

时间：2019-09-16 02:27:15

标签： jquery html

我正在使用jquery从json数组处理动态表单。

我有以下代码显示表单：

SELECT 
    city.id as city_id,
    city.sunset as sunset,
    city.country as country, 
    city.timezone as timezone, 
    city.name as name, 
    city.coord.lon as lon, 
    city.coord.lat as lat, 
    city.sunrise as sunrise, 
    weather.description,
    weather.icon,
    weather.main,
    list.dt_txt,
    list.clouds.all,
    list.sys.pod
FROM `project.dataset.table`, UNNEST(list) as list, UNNEST(list.weather) as weather

var data=[
	{"type":"dropdown","label":"Dropdown","req":0,
		"choices":[
			{"label":"choice1","sel":0,"notification":0,
				"subOptions":[
					{"NoteLabel":"choice1-Notes1","NoteValue":"","reqNote":"0"},
					{"PhotoLabel":"choice1-Photos1","PhotoValues":"","reqPhoto":"0"},
					{"DropLabel":"choice1-DropDown1","DropOptions":["choice1-DropDown1-op1","choice1-DropDown1-op2"],"DropSel":"","reqDrop":"0"},
					{"PhotoLabel":"choice1-Photos2","PhotoValues":"","reqPhoto":"0"},
					{"DropLabel":"choice1-DropDown2","DropOptions":["choice1-DropDown2-op1","choice1-DropDown2-op2","choice1-DropDown2-op3"],"DropSel":"","reqDrop":"0"}
				]
			},
			{"label":"choice2","sel":0,"notification":0,
				"subOptions":[
					{"DropLabel":"choice2-dropDown1","DropOptions":["choice2-dropDown1-op1"],"DropSel":"","reqDrop":"0"}
				]
			}
		]
	}
];
if(data)
{
  $.each( data, function( k, v ) {
    var $currentField = $('#form-fields .field').last();
    var subType=v['type'];
    $currentField.find('.field-label').val(v['label']);
    if (v['choices']) {
      $.each( v['choices'], function( k, v ) {
        $currentField.find('.choices ul').append(addChoice(subType));
        $currentField.find('.sub-choices ul').empty();
        $currentField.find('.choice-label').last().val(v['label']);
        if(v['subOptions'])
        {
          $.each( v['subOptions'], function( sk, sv ) {
            if(sv['NoteLabel'])
            {
              $currentField.find('.choices li').last().find('.parentbox').append('<div  style="background:#eee;margin:10px;padding:10px;border:0px solid #fd7e14;"><label for="sub-text" style="display:inline-block; float:left;" class="sub_textarea_label">Notes Label/Question?</label><br/><textarea  style="display:inline-block; vertical-align:middle;" name="choice_notes" class="sub_textarea" rows="3" cols="40" placeholder="label for notes">'+sv['NoteLabel']+'</textarea><div>');
            }
            if(sv['PhotoLabel'])
            {
              $currentField.find('.choices li').last().find('.parentbox').append('<div  style="background:#eee;margin:10px;padding:10px;border:0px solid #fd7e14;"><label for="sub-photo" style="display:inline-block; float:left;" class="sub_photos_label">Photos Label/Question?</label><br/><input type="text" name="choice_image" class="sub_photos" style="display:inline-block; vertical-align:middle;" size="50" placeholder="label for photos" value="'+sv['PhotoLabel']+'"/></div>');
            }

            if(sv['DropLabel'])
            {
              $currentField.find('.choices li').last().find('.parentbox').append('<div style="background:#eee;margin:10px;padding:10px;border:0px solid #fd7e14;"><label  for="sub-drop" style="display:inline-block; float:left;" class="sub_drop_label">Dropdown Label/Question:</label><br/><textarea  class="sub-field-label" style=" display:inline-block; vertical-align:middle;" cols="40" placeholder="Label for dropdown">'+sv['DropLabel']+'</textarea><div class="sub-choices"><ul  style="list-style-type:decimal;" class="subList" ></ul></div> </div>');
              if(sv['DropOptions'])
              {
                $.each( sv['DropOptions'], function( dk,dv ){ 
                  var li = $('<li></li>');                                                                   li.html('Test-'+dv);
                  $currentField.find('.choices li').last().find('div.parentbox  div.sub-choices').last().append(dv+'<br/>');  
                 // $currentField.find('.choices li').last().find('div.parentbox  div.sub-choices').last().find("ul").append(li); 
                 //$currentField.find('.choices li').last().find('div.parentbox  div.sub-choices').last().find('ul').append(li);
                // $currentField.find('.choices li').last().find('div.parentbox  div.sub-choices').last().find('ul.subList').append(li);
                 //$currentField.find('.choices li').last().find('div.parentbox  div.sub-choices').last().find('.subList').append(li);
                 //$currentField.find('.choices li').last().find('div.parentbox  div.sub-choices').last().find('ul.subList').prepend(li);
                });
              }
            }
          });
        }
      });
    }
  });
}

function addChoice(subType) {
  if(subType=="sub-drop")
  {
    return '' +
    '<li>' + 
    '<label style="color:#fd7e14;">Add Choice: ' +
    '<input type="text" class="sub-choice-label">' +
    '</label>' +
    '</li>' ; 
  }
  if(subType=="dropdown")
  {
    return '' +
    '<li>' + 
    '<label style="color:#fd7e14;">Add Choice: ' +
    '<input type="text" class="choice-label"> ' +
    '</label>' +
    '<label class="add-sub-choice">'+
    '</label>' +
    '<div style="border:none;" class="parentbox" >'+    
    '</div>' +
    '</li>' ;
  }
}

除了将<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <form id="sjfb"> <div id="form-fields" class="ui-sortable"> <div class="field ui-sortable-handle" data-type="dropdown" style="display: block;"> <fieldset> <legend> <h6 style="color:#007bff;">Dropdown List</h6> </legend> <label>Field Label/Question: <textarea class="field-label" style="white-space: pre-wrap;height:auto;width: 100%;" cols="50">Dropdown</textarea> </label> <div class="choices"> <ul style="list-style-type:decimal;" class="ui-sortable"> </ul> </div> </fieldset> </div> </div> </form>附加到现有的DropOptions标记之外，一切都正常。上面的代码将ul附加到DropOptions。我需要将div.sub-choices附加到DropOptions。

我评论了我尝试在此处添加的选项：

ul.subList

请帮助我找到附加li标签的选项。

更新

enter image description here

使用上面的代码if(sv['DropOptions']) { $.each( sv['DropOptions'], function( dk,dv ){ var li = $('<li></li>'); li.html('Test-'+dv); $currentField.find('.choices li').last().find('div.parentbox div.sub-choices').last().append(dv+'<br/>'); // $currentField.find('.choices li').last().find('div.parentbox div.sub-choices').last().find("ul").append(li); //$currentField.find('.choices li').last().find('div.parentbox div.sub-choices').last().find('ul').append(li); // $currentField.find('.choices li').last().find('div.parentbox div.sub-choices').last().find('ul.subList').append(li); //$currentField.find('.choices li').last().find('div.parentbox div.sub-choices').last().find('.subList').append(li); //$currentField.find('.choices li').last().find('div.parentbox div.sub-choices').last().find('ul.subList').prepend(li); }); } 附加到DropOptions上，如上图所示。我需要将div.sub-choices标记附加到li内的ul标记中

2 个答案:

答案 0 :(得分：0)

由于您使用了选择器，您的代码未找到正确的元素来附加这些选项。 jQuery选择器$currentField.find('.choices li')中的空格将匹配从li类的元素派生的每个choices元素。这意味着它将在您的li div中拾取sub-choices个元素。

尝试将$currentField.find('.choices li').last()更改为$currentField.find('.choices > ul > li').last()，以仅获得li格中的最后一个choices。

此外，您的代码然后在循环到第二个问题时清除这些子选择。删除$currentField.find('.sub-choices ul').empty();以停止此操作。

jsFiddle

根据您对其他选择的评论，需要检查其余选择器是否存在相同的问题。可以通过将$currentField.find('.choices ul').append(addChoice(subType));更改为$currentField.find('.choices > ul').append(addChoice(subType));来解决这一特定问题。

答案 1 :(得分：0)

尝试一下：

$currentField.find('.choices li').last().find('div.parentbox  div.sub-choices').last().find('ul').append('<li>'+dv+'</li>');
相关问题
最新问题