Question

目标页面HTML如下所示：

TypeClassRecord

当某个<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。赞：

变化：

div.conversion

在第一行中：

<div class="conversation">

因为这两个值在两个嵌套的<div class="conversation Tag1 Tag2">

中

我该怎么做？

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驱动的），这似乎很可能。

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

2 个答案: