【ajax】特定のページの特定の要素を何個持ってくるか指定する方法

ajaxを使うと今いるページ以外のページや特定の要素を取得することができます。

今回はajaxで特定の要素を持ってくるだけでなくリストになっている場合に何個まで持ってくるかを指定する方法を紹介します。

ajaxで取得する要素の数を指定する

表示させるページ（index.html）

<div id="ajax-output"></div> 

ajaxで持ってくるページ(ajax.html)

<ul id="list">
        <li>
                <dl class="item"><dt>アイテム1</dt><dd>説明</dd></dl>
                <dl class="item"><dt>アイテム2</dt><dd>説明</dd></dl>
                <dl class="item"><dt>アイテム3</dt><dd>説明</dd></dl>
                <dl class="item"><dt>アイテム4</dt><dd>説明</dd></dl>
                <dl class="item"><dt>アイテム5</dt><dd>説明</dd></dl>
                <dl class="item"><dt>アイテム6</dt><dd>説明</dd></dl>
                <dl class="item"><dt>アイテム7</dt><dd>説明</dd></dl>        
        </li>
</ul>

js

jQuery.ajax({
	url: '/ajax.html',
	type: 'get',
	dataType: 'html',
	timeout: 10000
})
.then(
	function(data) {
		jQuery('#ajax-output').append('<div id="list"><li>');
		let ajaxElem = jQuery(data);

		let ajaxElemLi = jQuery(data).find('li');

		let count = 1;
		ajaxElemLi.children('dl').each(function() {
			if(count != 4){
				let ajaxThis = jQuery(this);
				jQuery('#ajax-output #list li').append(ajaxThis);
				count ++;
			}else{
				return false;
			}
		});
	},
	function() {console.log('error');}
); 

dlの要素を3つ持ってくる処理になります。

サンプル