7

何かで始まる属性を含むHTMLページのすべての要素/ノードを取得したいと思います（ここでも、属性名は値ではなく何かで始まります！）。たとえば、TinyMCEは、保存する要素に、、、などのカスタム属性を追加する傾向があります。"mce_style"属性値にはCSS3セレクターのようなものが必要ですが、値には属性名がありません。"mce_href""mce_bogus"[attr^="mce_"]

もちろん、すべてのDOMノードとその属性を繰り返し処理して、1つずつ確認することもできますが、もっと効率的な方法があるかどうか疑問に思いました。

TinyMCE固有の回答を教えてはいけません。TinyMCEがこれらの属性を保存するのを妨げるフラグがあると確信していますが、質問は一般的です。

4

4 に答える 4

6

これは、で始まる属性を含むすべての要素を見つけるための簡単なデモmce_です。いくつかの改良が必要な場合があります。

function getMCE() {
    var el, attr, i, j, arr = [],
        reg = new RegExp('^mce_', 'i'),                //case insensitive mce_ pattern
        els = document.body.getElementsByTagName('*'); //get all tags in body

    for (i = 0; i < els.length; i++) {                 //loop through all tags
        el = els[i]                                    //our current element
        attr = el.attributes;                          //its attributes
        dance: for (j = 0; j < attr.length; j++) {     //loop through all attributes
            if (reg.test(attr[j].name)) {              //if an attribute starts with mce_
                arr.push(el);                          //push to collection
                break dance;                           //break this loop
            }
        }
    }
    return arr;
}

console.log(getMCE())​
于 2012-04-25T11:06:05.323 に答える
1

これを試して：

機能

//custom selector expression
$.extend($.expr[':'],{
attr:function(o,i,m){
  var attrs=$.getAttrAll(o),re=m[3],found=false;
  $.each(attrs,function(k,v){
  if(new RegExp(re).test(v)) { return found=true;}
});
return found;
} 
});
// get all atrributes of an element
$.getAttrAll=function(el){
  var rect = [];
  for (var i=0, attrs=el.attributes, len=attrs.length; i<len; i++){
    rect.push(attrs.item(i).nodeName);
  }
  return rect;
};

` 使用法

// calling custom selector expression :attr(regexp)
$(function(){
  $('body').find(':attr("^mce_")').css({background:'yellow'});
});

HTML

<body>
  <p mce_style="height:50px" id="x" data-hello="hello">selected</p>
  <div not_mce_bogus="abc">not_mce_bogus</div>
  <div mce_href="http://rahenrangan.com">selected</div>
  <p>othrs</p>
</body>
于 2012-04-25T13:08:50.770 に答える
1

DOM を一時的に変更してもかまわない場合の 1 つのオプションは、HTML を文字列に抽出し、RegExp を介して属性を検索することです。属性が見つかったら、DOM に「針」を追加して、jQuery を使用して要素を選択できるようにします。

これが作業コンセプトです（コンソールを開いた状態で実行）：

http://jsfiddle.net/skylar/N43Bm/

コード：

$.fn.extend({

    findAttributes: function(attribute) {

        var attributeFinder = new RegExp(attribute + '(.+)="', "gi");
        var elementHTML = this.html().replace(attributeFinder, "data-needle='pin' "+attribute+"$1=\"");

        this.html(elementHTML);

        return this.find("[data-needle=pin]").removeAttr('data-needle');
    }

});

console.log($("body").findAttributes('mce_'));

注: 私の正規表現は良くありません。この例よりも注意が必要です。

于 2012-04-25T20:19:14.340 に答える
-1

これを試してください：（タグの代わりに*を入れてみましたが、属性aを持たない要素も含めてすべての要素に色が付けられました）mce_style

a[mce_style] { color : red; }​

デモ: http://jsfiddle.net/Tcdmb/

詳細: https://developer.mozilla.org/en/CSS/Attribute_selectors

于 2012-04-25T10:16:28.160 に答える