7

わかりました、私は検索に最善を尽くしました、しかし。Ajaxなどを使用していくつかのjsをロードする必要があるタスクがあります。簡単に言えば、私は立ち往生しています。

まず、script.jsのコード（ロードする必要があり、変更できない）：

var divs = [
    '<div class="item">Lorem ipsum 0</div>',
    '<div class="item">Lorem ipsum 1</div>',
    '<div class="item">Lorem ipsum 2</div>',
    '<div class="item">Lorem ipsum 3</div>',
    '<div class="item">Lorem ipsum 4</div>',
    '<div class="item">Lorem ipsum 5</div>',
    '<div class="item">Lorem ipsum 6</div>',
    '<div class="item">Lorem ipsum 7</div>'
];
delete(divs[3]);

次に、それをロードするためのスクリプト

$.getScript('script.js', function() {
    $('.a').append('<div class="yep">' + divs.join('') + '</div>');
    $('.item').each(function() {
        $(this).click(function() {
            console.log( $('.item').index(this) );
        });
    });     
});

問題は、クリックすると配列内のアイテムのインデックスを取得する必要があることです。つまり、「Lorem ipsum 4」をクリックすると、コンソールは現在のように「3」ではなく「4」を出力するはずです（削除された要素がないため） domに表示されます）。jQueryを使用して正しい結果を得る方法はありますか？

わかりました、それは仕事だと言う必要があります。そして、これが重要です。script.jsを変更することはできません。サーバー上にあり、取得するまでアクセスできないとします。しかし、元の配列にある要素のインデックスが必要です。

4

4 に答える 4

4

クリックされた項目の INDEX を求めています。あなたのコードは、それがすべきことを正確に行っています。jQuery は、元のリストからアイテムを削除したかどうかを知る方法がなく、現在そこにあるものしか確認できません。

最善の解決策は、元のアイテムに HTML 属性を追加するconsole.logことです.index。このような：

var divs = [
    '<div data-idx="0" class="item">Lorem ipsum 0</div>',
    '<div data-idx="1" class="item">Lorem ipsum 1</div>',
    '<div data-idx="2" class="item">Lorem ipsum 2</div>',
    '<div data-idx="3" class="item">Lorem ipsum 3</div>',
    '<div data-idx="4" class="item">Lorem ipsum 4</div>',
    '<div data-idx="5" class="item">Lorem ipsum 5</div>',
    '<div data-idx="6" class="item">Lorem ipsum 6</div>',
    '<div data-idx="7" class="item">Lorem ipsum 7</div>'
    ];
delete(divs[3]);


$('.a').append('<div class="yep">' + divs.join('') + '</div>');

$('.item').each(function() {
    $(this).click(function() {
        console.log($(this).data('idx'));
    });
});​

http://jsfiddle.net/mblase75/8NLGm/

于 2012-12-21T14:43:52.633 に答える
2

次のようなことを試してください：

http://jsfiddle.net/YjNAL/1/

var divs = [
    '<div class="item">Lorem ipsum 0</div>',
    '<div class="item">Lorem ipsum 1</div>',
    '<div class="item">Lorem ipsum 2</div>',
    '<div class="item">Lorem ipsum 3</div>',
    '<div class="item">Lorem ipsum 4</div>',
    '<div class="item">Lorem ipsum 5</div>',
    '<div class="item">Lorem ipsum 6</div>',
    '<div class="item">Lorem ipsum 7</div>'
];
delete(divs[3]);

var yep = $('<div class="yep"></div>');    // Changed (from edit)

for (var i = 0; i < divs.length; i++) {
    if (divs[i]) {  // Don't operate on undefined items
        var theDiv = $(divs[i]).data("idx", i);    // Changed (from edit)

        yep.append(theDiv);    // Changed (from edit)
    }
}

$(".a").append(yep);    // Changed (from edit)

$('.item').on("click", function() {
    console.log( $(this).data("idx") );
});

元の配列が変更されていないことに注意してください。

配列内の各項目が変更され、追加される前に jQuery オブジェクトが作成されます。<- その部分はもっと効率的にできると確信しています。何かをまとめようとしていました。

インデックスはforループの配列に格納されるため、正確である必要があります。

未定義 (削除済み) の項目は無視されます。

于 2012-12-21T15:18:53.183 に答える
-1

少し動的にしたい場合は、要素を作成し、それにデータ フィールドを追加してから、その要素にアクセスできます。

var divs = [
    '<div class="item">Lorem ipsum 0</div>',
    '<div class="item">Lorem ipsum 1</div>',
    '<div class="item">Lorem ipsum 2</div>',
    '<div class="item">Lorem ipsum 3</div>',
    '<div class="item">Lorem ipsum 4</div>',
    '<div class="item">Lorem ipsum 5</div>',
    '<div class="item">Lorem ipsum 6</div>',
    '<div class="item">Lorem ipsum 7</div>'
    ];
var newdivs = $('<div class="yep">').append(divs.join(""));
newdivs.find('.item').each(function() {
     $(this).data("myindex", $(this).index());
});
var elementToDelete = 3
delete(divs[elementToDelete]);
newdivs.find('.item').eq(elementToDelete).remove();
$('.a').append(newdivs);

$('.a').on('click','.item',function() {
    $(this).css("background-color","lime");
    alert($(this).data("myindex"));
});

ここでどのように機能するかを参照してください： http://jsfiddle.net/rZjNd/2/

于 2012-12-21T15:00:14.090 に答える
-1

これを試すことができます。すべての div に ID を与えて、それを取得します。

var divs = [
    '<div class="item" id="0">Lorem ipsum 0</div>',
    '<div class="item" id="1">Lorem ipsum 1</div>',
    '<div class="item" id="2">Lorem ipsum 2</div>',
    '<div class="item" id="3">Lorem ipsum 3</div>',
    '<div class="item" id="4">Lorem ipsum 4</div>',
    '<div class="item" id="5">Lorem ipsum 5</div>',
    '<div class="item" id="6">Lorem ipsum 6</div>',
    '<div class="item" id="7">Lorem ipsum 7</div>'
];
delete(divs[3]);

$('.a').append('<div class="yep">' + divs.join('') + '</div>');
$('.item').each(function() {
    $(this).click(function() {
        console.log(this.id);
    });
});  ​

IDに数字が?!?

そうですね、HTML4 では、id数字で始まる s は許可されていませんでした。ただし、HTML5 ではこの制限がなくなりました。これらの div はw3 バリデータ
に従って検証されます。

于 2012-12-21T14:43:57.843 に答える