问题描述
JScript在大多数时候都是我的头脑，但设计不佳的网站做得更多。 Foursquare就其超级用户而言就是一个这样的例子。
期望结果
一个greasemonkey脚本，它将查看每次出现的DIV类 searchResult ，并在DIV类 name 之后添加两个类似于这些的新的HREF元素：
< a href =/ venue / venueid / edit>管理场地< / a> < a href =/ edit_venue？vid = venueid>编辑地点< / a>
Scenairo
https://foursquare.com/search ），并添加一些额外的链接可以直接跳转到一个场地的特定页面，这将使工作流程更快。
我环顾四周寻找如何做到这一点的例子（学习通过逆向工程），但如果我应该使用RegEx或其他东西，我会陷入困境。
示例
在搜索结果页面上（），有一个返回的场地列表。搜索结果中返回的每个地点的代码如下所示：
< div class =searchResult>
< div class =icon>< img src =https://4sqstatic.s3.amazonaws.com/img/categories/parks_outdoors/default-29db364ef4ee480073b12481a294b128.pngclass =thumb/ >< / DIV>
< div class =info>
< div class =name>< a href =/ venue / 4884313>员工吸烟点/垃圾箱码头< / a>< / div>
< div class =address>< span class =adr>< / span>< / div>
< div class =specialoffer>< / div>
< / div>
< div class =extra>
< div class =extra-tip>< div>< a href =/ venue / 4884313> 0提示< / a>< / div>< / div>
< div class =extra-checkins>< div> 10个签到< / div>< / div>
< / div>
< / div>
到目前为止工作
寻找答案，这就是我的想法（下图）。毋庸置疑，它根本不会检测到需要插入A HREF元素的位置，也不会遍历页面上输出的所有 searchResult 元素，更不用说正确构造链接了。
//第一个版本
var elmNewContent = document.createElement（'a'）;
elmNewContent.href = sCurrentHost;
elmNewContent.target =_ blank;
elmNewContent.appendChild（document.createTextNode（'edit venue'））;
var elmName = document.getElementById（'name'）;
elmName.parentNode.insertBefore（elmNewContent，elmName.nextSibling）;
使用jQuery这很简单。
这是整个剧本，因为这是一个5分钟的工作...
// == UserScript ==
// @name _Square away foursquare
// @include http://foursquare.com/*
// @include https://foursquare.com/*
/ / @require http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
// @grant GM_addStyle
// == / UserScript ==
var SearchRezLinks = $（div.searchResult div.name> a）;
/ * ---链接如下：< a href =/ venue / 6868983> Dumpling King< / a>
其中6868983是场地ID。
想要添加：< a href =/ venue / venueid / edit>管理场地< / a>
< a href =/ edit_venue？vid = venueid>编辑地点< / a>
* /
SearchRezLinks.each（function（）{
var jThis = $（this）;
var venueID = jThis.attr（'href'）。替换（/ \D +（\d +）$ /，'$ 1'）;
jThis.parent（）。append（'< a href =/ venue /'+ venueID +'/ edit> ;管理场地< / a>'）;
jThis.parent（）。append（'< a href =/ edit_venue？vid ='+ venueID +'>编辑场地< / a>'） ;
}）;
GM_addStyle（\
div.searchResult div.name> a + a {\
font-size：0.7em; \
margin- left：2em; \
} \
）;
JScript does my head in most days, but poorly designed sites do it even more. Foursquare's is one such example in respect of its superusers.
Desired Outcome
A greasemonkey script that will look through each occurrence of the DIV class searchResult, and after the DIV class name append two new A HREF elements similar to these:
<a href="/venue/venueid/edit">Manage venue</a> <a href="/edit_venue?vid=venueid">Edit venue</a>
Scenairo
I would like to make the life of their superusers a little easier using Greasemonkey. The intent is to modify a specific page on the site (https://foursquare.com/search), and add a number of extra links to jump directly to specific pages for a venue that would make the workflow faster.
I've looked around for examples of how to do this (learn through reverse engineering), but I get stuck on if I should be using RegEx or something else.
Example
On the search results page (https://foursquare.com/search?q=dump&near=Perth%2C+Australia), there is a list of venues returned. The code for each venue returned on the search results looks exactly like this:
<div class="searchResult">
<div class="icon"><img src="https://4sqstatic.s3.amazonaws.com/img/categories/parks_outdoors/default-29db364ef4ee480073b12481a294b128.png" class="thumb" /></div>
<div class="info">
<div class="name"><a href="/venue/4884313">Staff Smoking Spot / Dumpster Dock</a></div>
<div class="address"><span class="adr"></span></div>
<div class="specialoffer"></div>
</div>
<div class="extra">
<div class="extra-tip"><div><a href="/venue/4884313">0 tips</a></div></div>
<div class="extra-checkins"><div>10 check-ins</div></div>
</div>
</div>
Work so far
Looking around for answers, this is what I have come up with (below). Needless to say, it isn't detecting where it needs to insert the A HREF elements at all, and doesn't loop through all of the searchResult elements output on the page, let alone construct the link correctly.
// First version
var elmNewContent = document.createElement('a');
elmNewContent.href = sCurrentHost;
elmNewContent.target = "_blank";
elmNewContent.appendChild(document.createTextNode('edit venue'));
var elmName = document.getElementById('name');
elmName.parentNode.insertBefore(elmNewContent, elmName.nextSibling);
This is pretty simple using jQuery.
Here's the whole script, since it was a 5-minute job...
// ==UserScript==
// @name _Square away foursquare
// @include http://foursquare.com/*
// @include https://foursquare.com/*
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
// @grant GM_addStyle
// ==/UserScript==
var SearchRezLinks = $("div.searchResult div.name > a");
/*--- Link is like: <a href="/venue/6868983">Dumpling King</a>
where 6868983 is venue ID.
Want to add: <a href="/venue/venueid/edit">Manage venue</a>
<a href="/edit_venue?vid=venueid">Edit venue</a>
*/
SearchRezLinks.each ( function () {
var jThis = $(this);
var venueID = jThis.attr ('href').replace (/\D+(\d+)$/, '$1');
jThis.parent ().append ('<a href="/venue/' + venueID + '/edit">Manage venue</a>');
jThis.parent ().append ('<a href="/edit_venue?vid=' + venueID + '">Edit venue</a>');
} );
GM_addStyle ( " \
div.searchResult div.name > a + a { \
font-size: 0.7em; \
margin-left: 2em; \
} \
" );
这篇关于更新页面以使用Greasemonkey添加新链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！