根据 HTML 属性设置元素的样式

Question

我有一个 div 有几个 child div 像这样：

<div class=container>
  <div data-value="3">div 1</div>
  <div data-value="2">div 2</div>
  <div data-value="1">div 3</div>
  <div data-value="2">div 4</div>
</div>

我需要将每个的 flex 属性设置为其 data-value。我想到了这个：

$('.container > div').css('flex', $(this).attr('data-value'));

但这不起作用 - 可能是因为那不是 $(this) 的使用方式。

我该如何解决这个问题？

Answer 1

首先在父项中的“container”属性值周围加上“”div。

我认为你需要使用 .each() 来遍历你想要的所有元素，然后 $(this) 将依次引用每个元素。

所以像这样...

$('.container > div').each(function() {
    $(this).css('flex', $(this).attr('data-value')); 
});

见https://api.jquery.com/each/

Answer 2

你不需要 JS。

.container { display: flex; }
.container > * {  outline: 1px solid gold; }

[data-value]     { flex: 1; }  /* default to 1 */
[data-value="2"] { flex: 2; }
[data-value="3"] { flex: 3; }

<div class="container">
  <div data-value="3">div 1</div>
  <div data-value="2">div 2</div>
  <div data-value="1">div 3</div>
  <div data-value="2">div 4</div>
</div>

或者没有硬编码值——通过使用CSS var():

.container { display: flex; }
.container > * { flex: var(--flex); outline: 1px solid gold;  }

<div class="container">
  <div style="--flex:3">div 1</div>
  <div style="--flex:2">div 2</div>
  <div style="--flex:1">div 3</div>
  <div style="--flex:2">div 4</div>
</div>

如果你完全需要 JavaScript - 那你就不需要 jQuery

document.querySelectorAll("[data-value]").forEach(el => el.style.flex = el.dataset.value);

.container { display: flex; }
[data-value] { outline: 1px solid gold;  }

<div class="container">
  <div data-value="3">div 1</div>
  <div data-value="2">div 2</div>
  <div data-value="1">div 3</div>
  <div data-value="2">div 4</div>
</div>

如果您完全需要 jQuery（— 在 2022 年您不需要）：

$("[data-value]").css("flex", function () {
  return $(this).attr("data-value");
});

.container { display: flex; }
[data-value] { outline: 1px solid gold;  }

<div class="container">
  <div data-value="3">div 1</div>
  <div data-value="2">div 2</div>
  <div data-value="1">div 3</div>
  <div data-value="2">div 4</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

根据 HTML 属性设置元素的样式

Set style of an element based on HTML attribute

html

css

jquery

flexbox