jQuery - 在循环中使用append（）

Question

所以我有一种特殊类型的数据结构，我正在尝试将其转换为分层列表。 Codepen：http://codepen.io/Metalyph/pen/NRGdLo?editors=1011

/* -------------------------------------------------- Example Variable */
var dataLayerArray = {
    length: 5,
    0: {
        id: 0,
        name: 'Layer 00',
        parentLayerId: -1,
        subLayerIds: [1,2,3]
    },
    1: {
        id: 1,
        name: 'Layer 01',
        parentLayerId: 0,
        subLayerIds: null
    },
    2: {
        id: 2,
        name: 'Layer 02',
        parentLayerId: 0,
        subLayerIds: null
    },
    3: {
        id: 3,
        name: 'Layer 03',
        parentLayerId: 0,
        subLayerIds: null
    },
    4: {
        id: 4,
        name: 'Layer 04',
        parentLayerId: -1,
        subLayerIds: null
    },
}


/* -------------------------------------------------- Heirarchy Loop */
for (var i = 0; i < dataLayerArray.length; i++) {
    var dataLayer = dataLayerArray[i];

    console.log('iteration ' + dataLayer.id);

    // DOM element added here
    $('#main_div ul').append('<li>'+dataLayer.name+'</li>');
    console.log('list item appended');

    if ( dataLayer.subLayerIds != null )
    {
        // this layer has children
        $('#main_div ul').append('<ul>');
        console.log('new list created');
    }
    else if
    (
        dataLayer.parentLayerId != -1
        &&
        dataLayer.parentLayerId != dataLayerArray[(dataLayer.id - 1)].id
        &&
        dataLayer.parentLayerId != dataLayerArray[(dataLayer.id + 1)].parentLayerId
    )
    {
        // this layer has a parent AND the previous layer is not the associated parent AND the next layer does not share the same parent
        $('#main_div ul').append('</ul>');
        console.log('list closed');
    }
    else
    {
        // layer has no children, and either has no parents or is a middle child
    }
}

列表应如下所示：

• 第00层
  • 第01层
  • 第02层
  • 第3层
• 第04层

相反，使用append（），它看起来像这样：

• 第00层
  • 第01层
  • 第02层
  • 第3层
  • 第04层
• 第01层
• 第02层
• 第3层
• 第04层

如果您查看codepen链接的控制台，您可以看到列表的迭代正在按照我的意图进行。我也尝试过使用after（）和html（html（）+'string'），但我最终得到了类似的奇怪结果。追加是否有某种我在这种情况下不理解的行为？

Answer 1

我会检查它是否没有父母只添加元素，如果它有子图层来添加另一个列表。如果它有父，那么它可以附加到具有相应类的列表。

＆＃13;

＆＃13;

	/* -------------------------------------------------- Example Variable */
	var dataLayerArray = {
		length: 5,
		0: {
			id: 0,
			name: 'Layer 00',
			parentLayerId: -1,
			subLayerIds: [1,2,3]
		},
		1: {
			id: 1,
			name: 'Layer 01',
			parentLayerId: 0,
			subLayerIds: null
		},
		2: {
			id: 2,
			name: 'Layer 02',
			parentLayerId: 0,
			subLayerIds: null
		},
		3: {
			id: 3,
			name: 'Layer 03',
			parentLayerId: 0,
			subLayerIds: null
		},
		4: {
			id: 4,
			name: 'Layer 04',
			parentLayerId: -1,
			subLayerIds: null
		},
	}


	/* -------------------------------------------------- Heirarchy Loop */
	for (var i = 0; i < dataLayerArray.length; i++) {
		var dataLayer = dataLayerArray[i];

		if(dataLayer.parentLayerId == -1){
			$('#main_div .main').append('<li>'+dataLayer.name+'</li>');
			if(dataLayer.subLayerIds!=null){
				$('#main_div ul').append('<ul class="parent'+dataLayer.id+'"></ul>');
			}
		}else{
			$('#main_div ul ul[class="parent'+dataLayer.parentLayerId+'"]').append('<li>'+dataLayer.name+'</li>');
		}
	}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="main_div">
	<ul class='main'>
		
	</ul>
</div>

＆＃13;

＆＃13;

＆＃13;

修改

如果您的子图层不是一直跟随父图层，那么您将拥有两个循环，一个用于获取所有父级，另一个用于获取所有子级：

＆＃13;

＆＃13;

var dataLayerArray = {
  length: 5,
  0: {
    id: 0,
    name: 'Layer 00',
    parentLayerId: -1,
    subLayerIds: [1, 2, 3]
  },
  1: {
    id: 1,
    name: 'Layer 01',
    parentLayerId: 0,
    subLayerIds: null
  },
  2: {
    id: 2,
    name: 'Layer 02',
    parentLayerId: 0,
    subLayerIds: null
  },
  3: {
    id: 3,
    name: 'Layer 03',
    parentLayerId: 0,
    subLayerIds: null
  },
  4: {
    id: 4,
    name: 'Layer 04',
    parentLayerId: -1,
    subLayerIds: null
  },
}

for (var i = 0; i < dataLayerArray.length; i++) {
  var dataLayer = dataLayerArray[i];

  if (dataLayer.parentLayerId == -1) {
    $('#main_div .main').append('<li>' + dataLayer.name + '</li>');
    if (dataLayer.subLayerIds != null) {
      $('#main_div ul').append('<ul class="parent' + dataLayer.id + '"></ul>');
    }
  } 
}
for (var i = 0; i < dataLayerArray.length; i++) {
  var dataLayer = dataLayerArray[i];

  if (dataLayer.parentLayerId != -1) {
    
    $('#main_div ul ul[class="parent' + dataLayer.parentLayerId + '"]').append('<li>' + dataLayer.name + '</li>');
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="main_div">
  <ul class='main'>

  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;