Question

我准备好制作一个改善工作的工具。请查看代码。

<div class="container width-200"></div>
<div class="container width-300"></div>

我想使用jquery dynamicaly将第一个div宽度设置为200px，然后将300px设置为containers: ... volumeMounts: - name: mntephemeraldockercontainers mountPath: /mnt/ephemeral/docker/containers readOnly: true ... volumes: - name: mntephemeraldockercontainers hostPath: path: /mnt/ephemeral/docker/containers。我不知道如何在Javascript中处理它。

我该怎么做才能做到这一点？

Answer 1

您需要查找具有width-*类{}的类*的元素。您可以使用.match()检查班级名称。如果类名是正确的，则将class的数字添加到元素的宽度。

$("[class*=width-]").each(function(){
    var match = $(this).attr("class").match(/width-([\d]+)/);
    if (match)
        $(this).css("width", match[1]);
});

div {
    background: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="width-100">100</div>
<div class="width-200">200</div>
<div class="width-300">300</div>

Answer 2

我认为你应该使用自定义属性。

HTML 5明确允许以数据开头的自定义属性。因此，例如，<p data-date-changed="Jan 24 5:23 p.m.">Hello</p>有效。由于它是由标准正式支持的，我认为这是自定义属性的最佳选择。并且它并不要求你用黑客来重载其他属性，所以你的HTML可以保持语义。

来源：http://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data- * - 属性

Answer 3

请在js中使用以下内容：

＆＃13;

$(document).ready(function(){
  $('.width-300').css({'width':'300px','border':'1px solid #000' });
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container width-300">
  Width 300
</div>

＆＃13;

Answer 4

.container
{
  margin:0 auto;
}

.width-300
{
  width: 300px;
}

如何使用jquery将与类名相关的样式添加到元素？

4 个答案: