0

さて、これが取り引きです：Greasemonkey/Chrome/その他の人々がそれらを管理するために使用するものなら何でも使用するためのユーザースクリプトを作成しようとしています。私がやりたいことの一部は、この特定のスクリプト用にデザインしたアイコンのラベルを作成することです。Jqueryでこれを達成する方法について、少なくとも大まかな考えがあります。私が使用したコードは次のとおりです。

$('li.tab.iconic').each(function (i) {
    var spanName = $('this').attr(id);
    var toRemove = '_button';
    var spanNameCrop = spanName.replace(toRemove,'');
    $('this').append('<span class="tooltip_label">'+spanNameCrop+'</span>');
});

基本的にはid、各の属性を取得し、liそこから「_button」という語句を切り取り、ラベルとなるスパンに残りのテキストを挿入したいと考えています。私の問題は、高低を検索しましたが、javascript でこのようなループを実行する方法についての明確な指示が見つからなかったことです。それは可能ですか？

または、スタイリングしている Web サイトには Jquery ライブラリが含まれています。jqueryスクリプトが機能するように、サイトがjqueryをロードした後にスクリプトをロードするように指示する方法はありますか?

編集：Avladovのおかげでうまくいきました。これが最終的なスクリプトです。

var jQuery, $ = null;

function addJQuery(callback) {
var p = null;

if(window.opera || window.navigator.vendor.match(/Google/)) {
    var div = document.createElement("div");
    div.setAttribute("onclick", "return window;");
    p = div.onclick();
}
else {
    p = unsafeWindow;
}

jQuery = $ = p.jQuery.noConflict();
callback();
}

var myFunction = function() {
jQuery('#header .tab.iconic[id!="missinge_button"] a').css({"background-image":"url('http://i.imgur.com/2QmZG.png')"});

jQuery('#header .tab.iconic').each(function (i) {
    var tabID = jQuery(this).attr('id');
    var labelName = tabID.replace('_button','');
    if (jQuery(this).find('span[class="tooltip_label"]').length){
    }
    else{
    jQuery(this).append('<span class="tooltip_label">'+labelName+'</span>');
    jQuery('.tooltip_label').css({'text-transform':'capitalize'});
    }
});

};

addJQuery(myFunction);
4

3 に答える 3

2

使用したくない場合'this'、使用したいthis場合、id が値を持つ変数文字列でない場合は、文字列にする必要があります。

$('li.tab.iconic').each(function (i) {
    var spanName = $(this).attr('id');
    var toRemove = '_button';
    var spanNameCrop = spanName.replace(toRemove,'');
    $('this').append('<span class="tooltip_label">'+spanNameCrop+'</span>');
});

サイトが jQuery を使用していない場合は、次のようなもので jQuery を含めることができます。

if(!(window.jQuery && window.jQuery.fn.jquery == '1.8.1')) {var s = document.createElement('script');s.setAttribute('src', 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js');s.setAttribute('type', 'text/javascript');document.getElementsByTagName('head')[0].appendChild(s);}
于 2012-09-11T15:49:32.900 に答える
1

Greasemonkey スクリプトが jQuery を使用するサイト用である場合は、スクリプトで使用できます。次のコードを使用します。

var jQuery, $ = null;

function addJQuery(callback) {
    var p = null;

    if(window.opera || window.navigator.vendor.match(/Google/)) {
        var div = document.createElement("div");
        div.setAttribute("onclick", "return window;");
        p = div.onclick();
    }
    else {
        p = unsafeWindow;
    }

    jQuery = $ = p.jQuery.noConflict();
    callback();
}

コールバックは、 Greasemonkey スクリプト内の関数です。これを行うと、通常の Web ページ JavaScript であるかのように、 jQueryと$の両方でjQueryを使用できます。

このアプローチの利点は、Firefox だけでなく、Chrome や Opera でも機能することです。また、新しい jQuery スクリプトをロードするのではなく、Web ページからのものを再利用します。

例： 

var myFunction = function() {
    // Your code here
};

addJQuery(myFunction);


編集:スクリプトのメタデータ ブロックで@includeと@match
を使用してスクリプトを制限する方法があります。 詳細については、GM Wiki を参照してください - http://wiki.greasespot.net/Metadata_Block

于 2012-09-11T15:56:49.540 に答える
0

jquery スクリプトを document.ready 関数内に追加します

$(document).ready(function(){
$('li.tab.iconic').each(function (i) {
    var spanName = $('this').attr('id');
    var toRemove = '_button';
    var spanNameCrop = name.replace(toRemove,'');
    $(this).append('<span class="tooltip_label">'+spanNameCrop+'</span>');
});
})

ページ上のすべてのリソースが取得されたときにコードが実行されるようになりました

ここで詳細を読むことができます: http://api.jquery.com/ready/

于 2012-09-11T15:48:42.790 に答える