jquery attr（name、value）メソッドの値パラメータ

Question

私はBibeaultのjQuery in Actionを読んでおり、attr()メソッドのvalueパラメータを理解することに問題があります。この本は、パラメータがindexとpreviousValueの関数であることを示しています。これらのパラメータの目的は何ですか？私はテキストの説明を理解していない。

具体的に私が知りたい：

1. は、これらのパラメータは必須ですか！
2. これらのパラメータの使用例はどのようなものですか？
3. 関数内で他のパラメータを使用できますか？

Answer 1

1）JavaScriptは必須ではありません。あなたはあなたが望むどんな金額でも使用します。これらのパラメータは、関数内で使用できます。

2）例：

のは、あなたがこのHTMLを持っているとしましょう：

今

<a href="#" title="Google"></a> 
<a href="#" title="Yahoo"></a> 
<a href="#" title="Bing"></a> 

、このスニペットを実行します。

$('a').attr('title', function(index, previousValue){ 
    return previousValue + ' - An external link'; 
}); 

これは、文字列を追加します " - 外部リンクを"すべてのタイトルの末尾に。今

は、これを見て：

$('a').attr('title', function(index, previousValue){ 
    return previousValue + ' - Link number ' + index; 
}); 

これは、次のHTMLになります：

<a href="#" title="Google - Link number 0"></a> 
<a href="#" title="Yahoo - Link number 1"></a> 
<a href="#" title="Bing - Link number 2"></a> 

あなたが見ることができるように、あなたが見ることができ、これらのパラメータは非常に便利です。

3）他のパラメータを使用して何を意味するのかよく分かりません。どうか明らかにしてください。

---

Javascriptのスコープ検索チェーンに精通していないようです。関数にパラメータを明示的に渡す必要はありません。彼らはそれ以上の範囲で定義されている場合、この関数はそれにアクセスする必要があります：

var num1 = 23; 
var num2 = 54; 

$('a').attr('title', function(){ 
    return num1 + num2; 
}); 

Answer 2

attrは、要素の属性にアクセスする方法です。関数を許可するオーバーロードは関数の戻り値を使用して値を設定することを可能にします（関数へのインデックスパラメータは選択項目のインデックスになり、previousValueはこれまでの値です）。

自分自身でこの過負荷を使用したことはありませんが、何らかの機能に基づいて属性値を作成しているといいと思います。

のattr（「名前」）セット - - 名前

のattr（「名前」、「値」）の値を取得します。

彼らは、パラメータの異なる数を渡して、必須ではありませんが、異なる機能を提供します名前の値

attr（ 'name'、function（i、v）{return v + i;}）; - nameの値を前の値+コレクション内のインデックスに設定します。

例： クラス「hiccup」と「yup」という名前の5つのスパンがあるとします。

$('span.hiccup').attr('name',function(i,v){return v + i;}); 

は、それぞれのスパンに「yup1」 - 「yup5」という名前を付けます。

さらに、要素内部を参照する関数内でこれにアクセスできます。これを考えると、本当に興味深いものをやることができます。

いつものように、jQueryのは、このすべての素晴らしいドキュメントがあります http://api.jquery.com/attr

Answer 3

それは実際にはかなり簡単です。 attr()ファンクションには3つのモードがあります。あなたが参照するものは値を得るためにコールバックをとります。例えば

：

$('.someClass').attr('rel', function(index, value) 
{ 
     // index refers to the elements index of the set; so of all elements with the 
     // css class 'someClass', the index will refer to that position in the list. 
     // If three elements match, the callback will be invoked 3 times, with 0, 1, 2 
     // as the index when each element, respectively, is invoked. 

     // value refers to the current value of the attribute. 

     // Return the value you want to set. 
     return 'SomeRelValue'; 
}); 

パラメータは必須ではありません。単にコールバックシグネチャからそれらを省略すると、その情報にアクセスできなくなります。このメソッドには他のパラメータを渡すことはできません。多くの要素にマッチし、selector要素の順序位置に基づいていくつかのデータを挿入したい場合に、この関数を使用することができます。例えば

：セレクタに一致する各要素について

$('.someElements').attr('rel', function(index, value) 
{ 
     return value + index; 
}); 

は、あなたはそれが何であったかにrel属性に加えて、セレクタのインデックスを設定します。要素1は、 'sampleRel'のrelが 'sampleRel1'に設定され、rel 'sampleRel'の要素2は 'sampleRel2'などになります。

Answer 4

を良い例は、私がここに短縮しますこれは、jQueryのdocumentationにあります：

ここでは、関連するHTMLです：

<div>Zero-th </div> 
<div>First </div> 
<div>Second </div> 

あなたは、それが各div要素に一意のidのを適用しますジャバスクリプトこれを実行する場合：

$("div").attr("id", function (arr) { 
    return "div-id" + arr; 
}); 

$関数はすべてのdivを返します。arr引数を使用すると、インデックスに基づいて属性値を指定できます。

attrに渡された関数も古い属性値を指定する値を受け取りましたが、これはjavascriptなので関数はその引数に名前を付ける必要はなく、argumentsでも利用できます。