Добавить текстовое значение узла как css-класса к родительскому элементу, используя Tampermonkey
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 где-нибудь Я хочу добавить его содержимое в родительский div.conversion как класс. Как:
менять:
<div class = "conversation">
в первом ряду:
<div class = "conversation Tag1 Tag2">
потому что эти два значения находятся в двух вложенных span.labelsElement-name
Как я могу это сделать?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
вы можете использовать jQuery addClass для этого:
$("span.labelsElement-name").each(function(index,element){
var text = $.trim($(element).text());
$(".conversation").addClass(text);
});
Демо-версия доступна по цене https://jsfiddle.net/xpvt214o/45269/.
Я думаю, что jQuery - самое простое решение для этого
Вся понятно. Но я хочу сделать это с помощью Tampermonkey, как я сказал в своем вопросе. Спасибо за ваш ответ.
Хорошее начало, но что будет, если будет несколько узлов .conversation? - что кажется очень возможным. Кроме того, jQuery недоступен в движках / сценариях GM / TM / userscript, если это не предусмотрено вашим сценарием.
Как сказал Люкум, jQuery отлично подходит для этого типа, поскольку он упрощает управление страницами (DOM).
Использование jQuery в пользовательском скрипте описано во многих сообщениях. См. этот ответ для наиболее надежного способа. (Используйте @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), что кажется вероятным.
Большое спасибо! Мне еще нужно понять эту @grand штуку, но она работает, и все остальное понятно. много похвалы
Пожалуйста! В этом случае @grant просто предотвращает конфликт между пользовательским скриптом и целевой страницей.
jQuery? Такие, как Tampermonkey, запускают только простой Javascript, не так ли?