4

私は現在jQueryを学んでいます。jQueryがJavaScriptのカスタムライブラリであることを私は知っています。

私はJavaScriptのみを使用している本でいくつかの学習例を行っています。さらに学習体験を深めるために、より効率的なものにjQueryを使用しようとしています。

だから、私はこのコードを持っています：

function addLetter(foo) {
    $(foo).unbind('click');
    var tileLetter = $(foo).attr('class').split(' ');
    var letter = tileLetter[2].charAt(1);
    if (document.getElementById('currentWord').childNodes.length > 0) {
        $('#currentWord p').append(letter);
    } else {
        var p = document.createElement('p');    
        var txt = document.createTextNode(letter);
        p.appendChild(txt);
        $('#currentWord').append(p);        
    }
}

質問1：

変更document.getElementById('currentWord').childNodes.lengthし$('#currentWord').childNodes.lengthても動作しません。jQueryセレクターは、DOM要素を取り戻すという点でJSdocument.getElementByIdと同じものだと思いました。その場合は、.childNodes.length関数を使用できるようにするのが理にかなっています。しかし、それは機能しません。私はそれが同じことではないと思いますか？

質問2：

コードは教科書コードです。そこにあるすべてのjQueryを追加しました。私のjQueryの知識は限られていますが、関数を実行するためのより効率的な方法はありますか？

関数の目的：

この関数は、ap要素を作成し、初めて実行する場合はテキストノードで埋めることになっています。p要素がすでに作成されている場合は、単に文字を追加します。

これは単語生成ゲームなので、文字をクリックすると、「currentWord」divに追加されます。タイルの文字は3番目のcssクラスに埋め込まれているため、属性が分割されます。

ありがとう！

4

6 に答える 6

2 
document.getElementById('currentWord')

DOMオブジェクト$('#currentWord')を返しますが、jQueryオブジェクト内にラップされたDOMオブジェクトを返します。

プレーンなDOMオブジェクトを取得するには、次のことができます

$('#currentWord').get(0)

それで

$('#currentWord').get(0).childNodes.length

動作するはずです。

于 2012-08-22T15:59:44.087 に答える
1

jQuery()関数（ ）を呼び出すと$()、要素自体ではなく、一致する要素を含むjQueryオブジェクトが返されます。

次に、を呼び出す$('#some-id')と、を実行して選択される要素を含むjQueryオブジェクトが返されますdocument.getElementById('some-id')。その要素に直接アクセスするために、.get()関数または配列インデックス構文のいずれかを使用して、そのjQueryオブジェクトから要素を取得できます:($('#some-id')[0]これは0インデックスです）。

于 2012-08-22T16:00:00.490 に答える
1

質問1：

jQueryはjQueryオブジェクトを返します。通常のjavascriptオブジェクトに戻すには、を使用$(object)[0]して、プレーンなjavascript（またはDOM）オブジェクトとして扱うことができます。

質問2：

効率は私には良さそうです。p要素の代わりにスパンを使用したい場合もありますが。

私はあなたができることの1つは（あなたは非常に速く走るように見えますが）dom要素をキャッシュすることだと思います：

function addLetter(foo) {
 $(foo).unbind('click');
 var tileLetter = $(foo).attr('class').split(' ');
 var letter = tileLetter[2].charAt(1);
 var currentWord = document.getElementById('currentWord');
 if (currentWord.childNodes.length > 0) {
    $(currentWord).find('p').append(letter);
 } else {
    var p = document.createElement('p');    
    p.innerHTML = letter;
    currentWord.appendChild(p);        
 }
}
于 2012-08-22T16:03:53.623 に答える
0

これらすべてをテキスト関数の呼び出しに置き換えることができると思います。

function addLetter(foo) {
    $(foo).unbind('click');
    var tileLetter = $(foo).attr('class').split(' ');
    var letter = tileLetter[2].charAt(1);
    var currentWordP = $('#currentWord p');
    if (currentWordP.size() > 0) {
        currentWordP.text(currentWordP.text() + letter);
    } else {
        $('#currentWord').append("<p>" + letter + "</p>");       
    }
}
于 2012-08-22T15:59:56.087 に答える
0

1：$.get(0)または$[0]を使用してDOM要素を取得します。例$('#currentWord')[0].childNodes.length_

2：これを試してください：

function addLetter(foo) {
    $(foo).unbind('click');
    var tileLetter = $(foo).attr('class').split(' ');
    var letter = tileLetter[2].charAt(1);
    if ($('#currentWord p').length > 0) {
        $('#currentWord p').append(letter);
    } else {
        $('#currentWord').append(
            $('<p />', { text: letter })
        );        
    }
}
于 2012-08-22T16:01:48.053 に答える
0

質問1：

document.getElementByIdはDOMオブジェクトを返します。もっと

childNodes.lengthは、document.getElementByIdによって返されるNodeオブジェクトのプロパティです。

jQueryセレクターはjQueryオブジェクトmoreを返します。.getを使用してjQueryオブジェクトからDOMオブジェクトを取得できます

$('#IDselector').get(0) = document.getElementById('IDselector')

質問2：

function addLetter(foo) {
    $(foo).unbind('click');
    var tileLetter = $(foo).attr('class').split(' ');
    var letter = tileLetter[2].charAt(1);
    if ($('currentWord p').length > 0) {
        $('#currentWord p').append(letter);
    } else {
        var p = $('<p />').text(letter);
        $('#currentWord').append(p);        
    }
}
于 2012-08-22T16:06:54.897 に答える