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

Question

The target page HTML looks like:

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

When ever a span.labelsElement-name is somewhere I'd like to add its contents to the parent div.conversion as a class. Like:

change:

<div class="conversation">

in the first row to:

<div class="conversation Tag1 Tag2">

because these two values are in the two nested span.labelsElement-name

How can I do this?

score 0 · Answer 1 · answered Apr 04 '18 at 14:59

0

you can use jQuery addClass to do it:

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

Available demo is at https://jsfiddle.net/xpvt214o/45269/

answered Apr 04 '18 at 14:59

flyingfox

13,414
3
24
39

jQuery? The likes of Tampermonkey do only run plain Javascript, don't they? – Robert Reiner Apr 04 '18 at 15:05
I think jQuery is the simplest solution for it – flyingfox Apr 04 '18 at 15:08
OK understand. But I want to do this with Tampermonkey like I said in my question. Thank you for your answer. – Robert Reiner Apr 04 '18 at 15:42
Good start, but what happens if there is more than one `.conversation` node? -- which seems very possible. Also, jQuery is not available in GM/TM/userscript engines/scenarios, unless your script makes it so. – Brock Adams Apr 04 '18 at 17:59

Brock Adams · Accepted Answer · 2018-04-04T18:02:07.420

As Lucumt said, jQuery is great for this kind as it makes manipulating pages (the DOM) a snap.

Using jQuery in a userscript has been covered in numerous posts. See this answer for the most robust way. (Use @require and @grant.)

A complete script that adds CSS classes based on that tag text is (Just the first gray block):

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

Run the code snippet to see it in action.

waitForKeyElements() is used in case the target page is dynamic (AJAX-driven), which seems likely.

Thank you so much! I still have to understand this @grand thing, but it works and all the rest is understood. many kudos — Robert Reiner, Apr 05 '18 at 09:10
You're welcome! In this case, `@grant` just keeps the userscript and the target page from conflicting with each other. — Brock Adams, Apr 05 '18 at 15:52

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

2 Answers2