2016-11-09 11 views
-1

私はws3schoolのjQueryチュートリアルを行っています。私はそれがどのように機能するのか理解していますが、どのように使用できるのかは考えられません。jQueryの基本(理論) - .text(i、x)、.html(i、x)、または.val(i、x)のindex(i)パラメータで何ができますか?

以下のウェブサイトの例またはhereの例。

$(document).ready(function(){ 
 
    $("#btn1").click(function(){ 
 
     $("#test1").text(function(i, origText){ 
 
      return "Old text: " + origText + " New text: Hello world! (index: " + i + ")"; 
 
     }); 
 
    }); 
 

 
    $("#btn2").click(function(){ 
 
     $("#test2").html(function(i, origText){ 
 
      return "Old html: " + origText + " New html: Hello <b>world!</b> (index: " + i + ")"; 
 
     }); 
 
    }); 
 
});
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
</head> 
 
<body> 
 

 
<p id="test1">This is a <b>bold</b> paragraph.</p> 
 
<p id="test2">This is another <b>bold</b> paragraph.</p> 
 

 
<button id="btn1">Show Old/New Text</button> 
 
<button id="btn2">Show Old/New HTML</button> 
 

 
</body> 
 
</html>

誰もが例を与えることができますか?コードは高く評価されましたが、必須ではありません

+1

あなたのためにインデックスを使用する多くの方法があります。たとえば、ある要素と別の要素との間に1対1の対応が必要な場合は、インデックス(つまりその位置)のみに関連します。コレクションを処理するときに反復回数を制限したい場合があります。あなたのコレクション内の奇数/偶数/ n *番目の子供を選びたいかもしれません。そう、など。意見に基づく回答を促すだけなので、私は閉会に投票しています。 – Terry

+0

オンラインチュートリアルでは、Jqueryを読む必要があります。このプラットフォームはチュートリアル用ではありません。あなたが開発中にどこかについていたら、私たちはあなたのためにここにいます。 – Samir

+1

毎回使用する必要はありません。 iteratorです。 2番目の要素( 'i%2 == 0')や何かを強調表示したいとしましょう。多くのオプションがあります。この場合、 'i'は要素が1つしかないので役に立たない。 –

答えて

2

これは、それに実用的な意味を持って助けるべきである:

var trial = 0; 
 
function indexTrial(i, prevText) { 
 
    //console.log(i + ': ' + prevText + ' (trial: ' + trial + ')'); 
 
    return prevText + ', (got <u>index ' + i + '</u> on trial ' + trial + ')'; 
 
} 
 

 
trial++; 
 
$('li').html(indexTrial); 
 

 
trial++; 
 
$('#second-list li').html(indexTrial); 
 

 
trial++; 
 
$('#second-list li:even').html(indexTrial);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<ul id="first-list"> 
 
    <li>abc</li> 
 
    <li>def</li> 
 
    <li>ghi</li> 
 
    <li>jkl</li> 
 
</ul> 
 
<hr/> 
 
<ul id="second-list"> 
 
    <li>123</li> 
 
    <li>456</li> 
 
    <li>789</li> 
 
</ul>

1

次のような場合には、それを使用する必要があります。

$("ul li").text(function(index) { 
    return "item number " + (index + 1); 
}); 

あなたは配列で使用するとき.text(index)が有用であるかもしれないことを意味します。

関連する問題