ajaxで違うページのhtmlを取得するコードをeach()で書きたい

Question

親ページから同じクラス名.column-elmの要素を上から４つ取得して、子ページの.index-listに表示したいと考えています。
一応下記コードでは動作したのですが、each()などを使ってもっとスマートに記載するにはどうすればいいでしょうか？

$(document).ready(function($){
	
	//違うページから取得
	'use strict';

	$.ajax({
		type:'GET',
		url:'該当ページのパス',
		dataType:'html'
	})
	.then(

	function (data) {
	   var contents1 = $(data).find('.column-elm:first-child').html();
	   var contents2 = $(data).find('.column-elm:nth-child(2)').html();
	   var contents3 = $(data).find('.column-elm:nth-child(3)').html();
	   var contents4 = $(data).find('.column-elm:nth-child(4)').html();
	   
	   $('.index-list').append(contents1);
	   $('.index-list').append(contents2);
	   $('.index-list').append(contents3);
	   $('.index-list').append(contents4);
	});

});

Comments

[kei344]

過去の質問について、「解決済」になっていないものが多数見受けられます。解決したものは「ベストアンサー」を選び、自力で解決した場合はその方法を解答欄に書き、もし万が一解決していないのであれば質問を編集するなどしてみてください。

Answer 1

全然試してないですが、こんな感じでいいような気がします。

$('.index-list').append( $(data).find('.column-elm:lt(4)') );

動かなかったらごめんなさい。

参考：
:lt() Selector | jQuery API Documentation

Comments

[ysfree14]

動作しました、ご回答ありがとうございました！