1

基本的に、私は何百もの画像を含むhtmlページを持っており、それぞれに画像を説明するtitle属性があります。理想的にはこれをすべて変更しますが、ページは今のところそのままにしておく必要があります。

これらのタイトル属性を検索し、可能であればページを対応する画像までスクロールしたいと思います。-いくつかのJavaScript検索スクリプトを試してみましたが、タグがページに表示されるのではなくコード内にあるため、単純な「ページ上」検索で機能させることができません。

誰かが私にこのようなことをする方法について正しい方向に向けることができますか？

これは私が使用していた「ページで検索」コードでした

var n = 0;
function findInPage(str) {
    var txt, i, found;
    if (str == "") {
        return false; 
    }
    // Find next occurance of the given string on the page, wrap around to the
    // start of the page if necessary.
    if (window.find) {
        // Look for match starting at the current point. If not found, rewind
        // back to the first match.
        if (!window.find(str)) {
            while (window.find(str, false, true)) {
                n++;
            }
        } else {
            n++;
        }
        // If not found in either direction, give message.
        if (n == 0) {
            alert("Not found.");
        }
    } else if (window.document.body.createTextRange) {
        txt = window.document.body.createTextRange();
        // Find the nth match from the top of the page.
        found = true;
        i = 0;
        while (found === true && i <= n) {
            found = txt.findText(str);
            if (found) {
                txt.moveStart("character", 1);
                txt.moveEnd("textedit");
            }
            i += 1;
        }
        // If found, mark it and scroll it into view.
        if (found) {
            txt.moveStart("character", -1);
            txt.findText(str);
            txt.select();
            txt.scrollIntoView();
            n++;
        } else {
            // Otherwise, start over at the top of the page and find first match.
            if (n > 0) {
                n = 0;
                findInPage(str);
            }
            // Not found anywhere, give message. else
            alert("Not found.");
        }
    }
    return false;
}
4

1 に答える 1

1

html属性で選択できます。

プレーン JS を使用する (IE8+ を含む最新のブラウザーで):

document.querySelectorAll('[title*="my text"]')

jQuery の使用:

$('[title*=my text]')

見つけるでしょう：

<img src="/path" title="this is a title with my text" />

そこから、セレクターによって返された画像のページ位置を取得し、必要に応じて (可能性が高い) オフセットを使用してそのポイントまでページをスクロールし、ビューポートの上部にぶつからないようにする必要があります。

編集：

function findElementsByTitle(str) {
    return document.querySelectorAll('[title*="' + str + '"]');     
}

function scrollToElement(el) {
    var yOffset = el.offset().top; //this is a jQuery method...you don't want to write this in plain JS
    window.scrollTo(0, yOffset - 10) //params are x,y. the - 10 is just so your image has some "padding" in the viewport

}
于 2012-12-21T16:32:39.480 に答える