使用 Tampermonkey 将节点的文本值作为 css-class 添加到父元素

Question

目标页面 HTML 看起来像：

<div class="conversation"> 
    <div class="subject"> 
        <div class="labels"> 
            <div title="Tag1" class="labelsElement-label"> 
                <span class="labelsElement-name">Tag1</span> 
            </div>
            <div title="Tag2" class="labelsElement-label"> 
                <span class="labelsElement-name">Tag2</span> 
            </div>
        </div> 
    </div> 
</div>

每当 span.labelsElement-name 出现在某处时 我想将其内容作为 class 添加到父级 div.conversion。 喜欢:

变化：

<div class="conversation">

第一行为：

<div class="conversation Tag1 Tag2">

因为这两个值在两个嵌套的span.labelsElement-name

我该怎么做？

Answer 1

您可以使用 jQuery addClass 来完成：

   $("span.labelsElement-name").each(function(index,element){
     var text = $.trim($(element).text());
     $(".conversation").addClass(text);
   });

可用演示在 https://jsfiddle.net/xpvt214o/45269/

Answer 2

正如 Lucumt 所说，jQuery 非常适合这种类型，因为它使操作页面（DOM）变得轻而易举。

在用户脚本中使用 jQuery 已在许多帖子中介绍过。参见 this answer for the most robust way。（使用 @require 和 @grant。）

一个完整的脚本 添加了 CSS 类基于那个标签文本是（只是第一个灰色块）：

// ==UserScript==
// @name     _Add CSS classes based on select node contents.
// @match    *://YOUR_SERVER.COM/YOUR_PATH/*
// @require  https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// @grant    GM.getValue
// ==/UserScript==
//- The @grant directives are needed to restore the proper sandbox.

waitForKeyElements (".labelsElement-name", taggifyParentNode);

function taggifyParentNode (jNode) {
    var tagName = jNode.text ().trim ();
    jNode.closest (".conversation").addClass (tagName);
}

/*--------------------------------------*/
/*--- Simulated target page follows: ---*/
/*--------------------------------------*/
.Tag1 {background-color: rgba(0,255,0,0.5); }
.Tag2 {background-color: rgba(255,0,0,0.5); }
.Tag1.Tag2 {background-color: rgba(255,255,0,0.5); }
.conversation, .labels > div {
    margin: 1ex 1em;
    border: 1px solid lightgray;
    border-radius: 0.5ex;
}
.labels > div {padding: 1ex 1em;  display: inline-block;}

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//greasyfork.org/scripts/2199-waitforkeyelements/code/waitForKeyElements.js"></script>
<div class="conversation"> <div class="subject">
    <div class="labels">
        <div title="Tag1"><span class="labelsElement-name">Tag1</span></div>
    </div>
</div></div>
<div class="conversation"> <div class="subject">
    <div class="labels">
        <div title="Tag2"><span class="labelsElement-name">Tag2</span></div>
    </div>
</div></div>
<div class="conversation"> <div class="subject">
    <div class="labels">
        <div title="Tag1"><span class="labelsElement-name">Tag1</span></div>
        <div title="Tag2"><span class="labelsElement-name">Tag2</span></div>
    </div>
</div></div>

运行用于查看实际效果的代码片段。

waitForKeyElements() 用于目标页面是动态的 (AJAX-driven)，这似乎很可能。

使用 Tampermonkey 将节点的文本值作为 css-class 添加到父元素

Add text value of a node as css-class to a parent element, using Tampermonkey

javascript

css

greasemonkey

tampermonkey