14

オブジェクトを介して DOM 要素を選択できるようにする方法はありますか?

たとえば、次のようにオブジェクトを DOM 要素に関連付けられるようにしたいと考えています。

var obj = { a: 1, b:2 };
$('a').click(function() { this.selectThing = obj });

そして後で...

$.something(obj);

またはさらに良い：

$('a|selectThing?=', obj);

そんな感じ。オブジェクトで要素を取得できるように、オブジェクトを DOM 要素に関連付けたいことがわかります。

これはメソッドで実行できることを知っていますfilter()。私の質問は、これを使用しないよりエレガントな方法があるかどうかfilter()です。

編集：

明確にするために、セレクターのようなオブジェクトを使用できるようにしたいので、これと同様のことを行うことができますが、これ$(obj)は明らかに機能しませんが、アイデアは得られます (願っています)。

編集＃2：

私はこのようなことができるようにしたい:

var obj = { prop: 'prop' };
$('a').bindTo(obj);
$.retreive(obj) // should equal $('a')

ただし、それを変更したくありませんobj（objまだ変更する必要があります{prop: 'prop'}）。

4

7 に答える 7

8

デモ

var $div1 = $('.box1');
var $div2 = $('.box2');
var obj = { a: $div1, b: $div2 };


obj.a.css({background:'red'});

または簡単な方法：var obj = { a: $('.box1'), b: $('.box2') };

デモjsBin2

var obj = $('.box1, .box2'); // store objects
obj.css({background:'red'}); // access collection
于 2012-04-30T01:12:16.100 に答える
2

これは簡単に達成できるとは思いません。明確にさせてください：

目的を達成するには、オブジェクトをキーの位置に配置できるハッシュマップが必要です。ただし、JavaScript は (まだ) オブジェクトをハッシュマップのキーとしてサポートしていません。そのため、たとえば次のような場合は機能しません。

var key = {value: 'key'};
var data {value: 'data'};
var map = {};

map[key] = data;

現在の JavaScript 実装でこれを達成するための他の解決策があります。二重ルックアップ:

var key = {value: 'key'};
var data {value: 'data'};
var map = { keys: [], data: [], get: function (key) {
  var k = this.keys.indexOf(key);
  if (k >= 0) {
    return this.data[k];
  } else return undefined;
}, set: function (key, val) {
  var k = this.keys.indexOf(key);
  if (k < 0) {
    k = this.keys.push(k) - 1;
  }
  this.data[k] = val;
} };

map.set(key, data);
map.get(key).value;

ただし、この実装はひどいパフォーマンスです。JavaScript Harmony には、いわゆるWeakMapの提案があります。ただし、Firefox は現在、それらを実装している唯一のブラウザーだと思います。必要な機能が広く利用可能ではなく、回避策のパフォーマンスが低いため、目的を達成する別の方法を見つけることをお勧めします。

于 2012-05-03T12:21:52.093 に答える
2

を探してい$.dataます。このメソッドは、JavaScript オブジェクトまたはプリミティブを DOM 要素に関連付けます。内部的には、データを拡張として DOM 要素などに追加するのではなく、jQuery は DOM 要素とデータ ハッシュの独自のオブジェクト キャッシュを維持します。しかし、それはボンネットの下にあります。要点は、まさにあなたが探しているものだと思います。

$('#example').data('foo', { bar: 'quux' }); // returns the jquery object containing '#example', like most jQuery methods

じゃあ後で：

console.log($('#example').data('foo')); // returns {bar: 'quux'}
于 2012-04-30T01:04:52.317 に答える
1

次の 3 つの方法で jQuery を拡張します。

jQuery.bindObj(data)
jQuery.unbindObj(data)
$.retrieve(data)

コードは次のようになります。

$('a').bindObj({blorg: 'shmorg'});
console.log($.retrieve({blorg: 'shmorg'})); // logs live result of $('a');

完全なソース: http://jsfiddle.net/nUUSV/6/。

このソリューションの秘訣は、jQuery コンストラクターに基づくセレクター/識別子を 1 つの配列に格納し、それらのセレクター/識別子にバインドされたオブジェクトを別の配列に格納し、$.inArray取得時にオブジェクトのインデックスを取得するために使用し、そのインデックスを使用して取得することです。バインドされた jQuery コレクション。

于 2012-05-08T22:43:54.433 に答える
1

私が理解しているように、DOM で複数の名前付き検索を実行し、名前空間オブジェクトで結果をフィルター処理するための砂糖の方法を探しています。

もしそうなら、次の jquery 拡張機能が役立つと思います。

$.fn.seek = function (selectors) {
  var container = this,
    found = {};

  $.each(selectors, function (name) {
    if ($.isPlainObject(selectors[name])) {
      found[name] = $(container).seek(selectors[name]);
    }
    else if ($.type(selectors[name]) === 'string') {
      found[name] = $(container).find(selectors[name]);
    }
  });

  return found;
}

そして、これは上記の拡張があなたのケースにどのように適用されるかの例です:

var res = $('body').seek({
  links: 'a',
  headers: 'h1,h2,h3,h4,h5,h6'
});

$(res.links).css({ color: 'green' });
$(res.headers).css({ color: 'red' });

これがお役に立てば幸いです。

于 2012-05-07T18:43:04.500 に答える
1

これがあなたが探しているものかどうかわかりません。おそらく、jquery セレクターに基づいてカスタム セレクターを記述できます。これは、セレクター プロパティを持つオブジェクトを好きなように処理します。選択可能なオブジェクトは次のようになります

var objSelector = {'selector' : '#select-me', 'a' : 'somestring', 'b' : 1243};

したがって、他のオブジェクトと同様に自由に使用できますが、セレクター プロパティを追加する必要があります。カスタムセレクターを追加するよりも:

$$ = (function($) {
    return function(el, tag) {
        if (typeof el === 'object' && el.selector !== undefined) {
            return $(el.selector);                  
        }
        return $(el);
    }
}($));

今、あなたは次のようなことができます

$$(objSelector).css({'border':'1px solid red'});

http://jsfiddle.net/JXcnJ/の実装を参照してください。

于 2012-05-07T18:55:48.933 に答える
1

enumerable私が正しく理解していれば、プロパティを定義して falseと言う必要があると思います。下記参照、

注:以下は単なる例であり、そのようなことを正確に行うことを意図したものではありません。

デモ

$(function() {

    $.fn.bindTo = function(o) {
        var _that = this;

        Object.defineProperty(o, 'myFx', {
            value: function() { return $(_that); },
            writable: true,
            enumerable: false,
            configurable: true
        });
    }

    $.retrieve = function(obj) {
        return obj.myFx();
    }

    var obj = {
        prop: 'prop'
    };

    $('#test').bindTo(obj);

    $($.retrieve(obj)).html('Test');

   //below is for proof
    for (i in obj) {
        alert(obj[i]);
    }
});

参照: http://yehudakatz.com/2011/08/12/understanding-prototypes-in-javascript/

于 2012-05-08T22:02:27.800 に答える