html - 如何通过moodle cashe 为自动插入到我的代码中的 元素提供一个类？

Question

我正在创建一个新的 moodle block ，我想为这个 block 编辑 CSS 代码。目前有一些图像我想制作内联但moodle 默认情况下在ul 和li 中制作这些图像 占据全宽度“display: block”。我不能给这些 li 任何类，我也不能选择 li，因为 moodle 为标题和 block 中的所有内容创建 li 标签，所以如果我编辑 li 它将适用于 h1 等每个元素不仅是 imgs，我可以给它上课吗？

<ul class="unlist">
   <li class="r0"><div class="column c1"><h3><div class="text_to_html">User grade</div></h3></div></li>
   <li class="r1"><div class="column c1">first grade middle school </div></li>
   <li class="r0"><div class="column c1"><h3><div class="text_to_html">user type</div></h3></div></li>
   <li class="r1"><div class="column c1"> Student</div></li>
   <li class="r0"><div class="column c1"><h3><div class="text_to_html">General Certificates</div></h3></div></li>
   <li class="r1"><div class="column c1"><a download="download" class="inline" href="http://81.10.36.53/pluginfile.php/711/profilefield_file/files_2/0/1900 $10000 Gold Certificate both sides.jpg"><img class="cvpic" src="http://81.10.36.53/pluginfile.php/711/profilefield_file/files_2/0/1900%20%2410000%20Gold%20Certificate%20both%20sides.jpg"></a></div></li>
   <li class="r0"><div class="column c1"><a download="download" class="inline" href="http://81.10.36.53/pluginfile.php/711/profilefield_file/files_2/0/Aamir Javed Certificate.jpg"><img class="cvpic" src="http://81.10.36.53/pluginfile.php/711/profilefield_file/files_2/0/Aamir%20Javed%20Certificate.jpg"></a></div></li>
   <li class="r1"><div class="column c1"><a download="download" class="inline" href="http://81.10.36.53/pluginfile.php/711/profilefield_file/files_2/0/US $20 1905 Gold Certificate.jpg"><img class="cvpic" src="http://81.10.36.53/pluginfile.php/711/profilefield_file/files_2/0/US%20%2420%201905%20Gold%20Certificate.jpg"></a></div></li>

Answer 1

如果可以使用jQuery ，你可以这样做:

$(document).ready(function() {
    $("ul.unlist li div img").css("display", "inline");
});

它做了什么:

• 等待页面完全加载
• 全选<img> <ul> 内的标签有 unlist类，也有一个 <div>作为父元素，在 <li> 中元素

所以，基本上，它选择了 <img>在您提供的几行的最后 3 行中。

这样，您只需选择 <li>有一个 <img>在其中标记而不是另一个 <li>与 <h3>标签，例如。

如果您不会使用 jQuery，这里是相同的代码，但使用的是纯 JavaScript:

(function() {
    document.querySelector("ul.unlist li div img").style.display = "inline";
})();

编辑

通过重新阅读你的问题，你想添加一个类，所以这里是:

jQuery

$("ul.unlist li div img").addClass("your-class");

JavaScript

document.querySelector("ul.unlist li div img").className += " your-class";

不要忘记 JavaScript 开头的空格，否则你的 <img>类将是这样的:cvpicyour-class而不是 cvpic your-class