如何使用jquery获取div的样式

Question

我想做一个函数将display的样式从none更改为block。我尝试使用jQuery的each()，但我不知道我在哪里出错或如何纠正它。

我已经使用每个jQuery使用数组，但我得到了一个错误，当我试图使用这个。

var ar = [];
ar.push(x1a, x2a, x3a, x4a, x5a, x6a);
$.each(ar, function() {
console.log(ar[5]);
if (ar.style.display === "none") {
ar.style.display = "block";
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div">
<p id="x1">hello 1</p>
<span id="x1a" style="display: none;">hello 1 hello</span>
</div>
<div class="div">
<p id="x2">hello 2</p>
<span id="x2a" style="display: none;">hello 2 hello</span>
</div>
<div class="div">
<p id="x3">hello 3</p>
<span id="x3a" style="display: none;">hello 3 hello</span>
</div>
<div class="div">
<p id="x4">hello 4</p>
<span id="x4a" style="display: none;">hello 4 hello</span>
</div>
<div class="div">
<p id="x5">hello 5</p>
<span id="x5a" style="display: none;">hello 5 hello</span>
</div>
<div class="div">
<p id="x6">hello 6</p>
<span id="x6a" style="display: none;">hello 6 hello</span>
</div>

Answer 1

当前代码的问题是ar是对整个数组的引用。您需要访问其中的每个单独的元素。为此，$.each()为函数处理程序提供了两个参数，第二个参数是迭代器中的当前元素。因此，您的代码应该看起来像下面的例子:

var ar = [];
ar.push(x1a, x2a, x3a, x4a, x5a, x6a);
$.each(ar, function(i, el) {
if (el.style.display === "none") {
el.style.display = "block";
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div">
<p id="x1">hello 1</p>
<span id="x1a" style="display: none;">hello 1 hello</span>
</div>
<div class="div">
<p id="x2">hello 2</p>
<span id="x2a" style="display: none;">hello 2 hello</span>
</div>
<div class="div">
<p id="x3">hello 3</p>
<span id="x3a" style="display: none;">hello 3 hello</span>
</div>
<div class="div">
<p id="x4">hello 4</p>
<span id="x4a" style="display: none;">hello 4 hello</span>
</div>
<div class="div">
<p id="x5">hello 5</p>
<span id="x5a" style="display: none;">hello 5 hello</span>
</div>
<div class="div">
<p id="x6">hello 6</p>
<span id="x6a" style="display: none;">hello 6 hello</span>
</div>

然而你应该注意到你的代码比它需要的要复杂得多。

如果您的目标只是在.div元素中切换span的显示状态，请选择它们并调用toggle()，如下所示:

$('.div span').toggle();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div">
<p id="x1">hello 1</p>
<span id="x1a" style="display: none;">hello 1 hello</span>
</div>
<div class="div">
<p id="x2">hello 2</p>
<span id="x2a" style="display: none;">hello 2 hello</span>
</div>
<div class="div">
<p id="x3">hello 3</p>
<span id="x3a" style="display: none;">hello 3 hello</span>
</div>
<div class="div">
<p id="x4">hello 4</p>
<span id="x4a" style="display: none;">hello 4 hello</span>
</div>
<div class="div">
<p id="x5">hello 5</p>
<span id="x5a" style="display: none;">hello 5 hello</span>
</div>
<div class="div">
<p id="x6">hello 6</p>
<span id="x6a" style="display: none;">hello 6 hello</span>
</div>

Answer 2

var ar = [];
ar.push(x1a,x2a,x3a,x4a,x5a,x6a);
//console.log(ar[0]);
//var ar = [1, 2, 3, 4];
$.each(ar , function() { 
console.log(ar[5]);
if (this.style.display === "none") {
this.style.display = "block";}
});

下面的代码为我工作感谢@Barmar