jqueryで複数の負荷関数を避ける

Question

私は50項目のulを持っています。下に50を書いてはいけないと書ける方法はありますか？

<ul class="myElem" data-page="n">... 

とjQueryで：

$(document).on('click', '.myElem', function() { 
    var page = $(this).attr('data-page'); //Get the page 
    $('#main_text').load('page' + page + '.html #main_text'); 
}); 

Answer 1

利用id上starts-withセレクタ^=とsplitへ

$(function(){ 
$("#nav_a").on("click", function(){ 
    $("#main_text").load("pageA.html #main_text"); 
}); 
$("#nav_b").on("click", function(){ 
    $("#main_text").load("pageB.html #main_text"); 
});  
$("#nav_c").on("click", function(){ 
    $("#main_text").load("pageC.html #main_text"); 
}); 

Answer 2

あなたはこのように、これらのすべての要素accross共通クラスを置くことができます手紙を入手する： -

$(function() { 
    $('[id^="nav_"]').on("click", function() { 
    var letter = this.id.split('_')[1]; 
    $("#main_text").load("page" + letter + ".html #main_text"); 
    }); 
}); 

あなたは大文字を維持したいならば、+ letter.toUpperCase() +

Answer 3

あなたはjQueryのに内蔵された各（）とEQ（）関数を使用することができます。 例を参照してください：

HTML：

<ul> 
    <li>0</li> 
</ul> 

<ul> 
    <li>1</li> 
</ul> 

Javascriptを：

var color = ['red', 'blue']; 

$("ul").each(function(i) { 
    $("ul:eq(" + i + ")").css("color", color[i]); 
}); 

そして、以下のように自分の状況のた​​めにそれを変更する：私はこれを取得するかどうかはわかりません

var page = ['pageA.html', 'pageB.html', 'pageC.html']; 

$("#nav ul").each(function(i) { 
    $("ul:eq(" + i + ")").on("click", function() { 
     $("#main_text").load(page[i] + " #main_text"); 
    }); 
});