基本上我有一个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;
}
答案 0 :(得分: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
}