Question

JScript在大多数时候都是我的头脑，但设计不佳的网站做得更多。 Foursquare就其超级用户而言就是一个这样的例子。

期望的结果

一个greasemonkey脚本，它将查看每次出现的DIV类 searchResult ，并在DIV类 name 之后追加两个类似于这些的新的HREF元素：

<a href="/venue/venueid/edit">Manage venue</a> <a href="/edit_venue?vid=venueid">Edit venue</a>

Scenairo

我想使用Greasemonkey让他们的超级用户的生活更轻松一些。目的是修改网站上的特定页面（https://foursquare.com/search），并添加一些额外的链接，直接跳转到场地的特定页面，这将使工作流程更快。

我已经四处寻找如何做到这一点的示例（通过逆向工程学习），但如果我应该使用RegEx或其他东西，我会陷入困境。

示例

在搜索结果页面（https://foursquare.com/search?q=dump&near=Perth%2C+Australia）上，有一个返回的场地列表。搜索结果中返回的每个地点的代码如下所示：

<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>

到目前为止工作

寻找答案，这就是我提出的（下图）。毋庸置疑，它根本不会检测到需要插入A HREF元素的位置，也不会遍历页面上输出的所有 searchResult 元素，更不用说正确构造链接了

// 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);

Answer 1

使用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");

/*--- 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添加新链接

1 个答案: