Question

我遇到问题，为什么下面的代码没有按预期工作。我试图通过将锚标记href保存到数组来从内容表中获取页面上的ID数组。数组是按照我的预期构造的，但是当我尝试将它用作目标元素时，没有任何反应。我怀疑它是因为数组被转换成一个字符串（它也可能来自console.log），但我仍然不太明白它为什么不能工作。我是否必须将数组转换为对象，如果是，那该怎么做？我无法在任何地方找到任何有趣的东西。

编辑：我必须这样做（最好至少），因为内容表是动态创建的（始终不是相同的元素），以及内容的元素表指向的应该相应地设置样式。

＆＃13;

var elements = [];
$(".bb").each(function() {
  elements.push($(this).attr("href"));
});
console.log(elements);

$(elements).each(function() {
  $(this).css("background", "red");
});

// This works for a single elment, however
var el = $(".cc").attr("href");
$(el).css("background", "green");

＆＃13;

 body {
  padding-bottom: 100px;
 }
div {
  height: 50px;
  margin-bottom: 10px;
  background: #d3fcff;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="aa"></div>
<div id="xx"></div>

<a class="bb" href="#aa">target #aa</a>
<a class="bb" href="#xx">target #xx</a>

<p>Not using an array and targeting a single element works however</p>
<div id="zz"></div>
<a class="cc" href="#zz">target #zz</a>

＆＃13;

Answer 1

您的数组包含您要定位的href - 因此必须在选择器中使用它们，如下所示 - 选择数组中a的所有hrefs -

＆＃13;

var elements = [];
$(".bb").each(function() {
  elements.push($(this).attr("href"));
});
console.log(elements);

elements.forEach(function(element) {
  $('a[href='+element+']').css("background", "red");
});

// This works for a single elment, however
var el = $(".cc").attr("href");
$(el).css("background", "green");

＆＃13;

body {
  padding-bottom: 100px;
 }
div {
  height: 50px;
  margin-bottom: 10px;
  background: #d3fcff;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="aa"></div>
<div id="xx"></div>

<a class="bb" href="#aa">target #aa</a>
<a class="bb" href="#xx">target #xx</a>

<p>Not using an array and targeting a single element works however</p>
<div id="zz"></div>
<a class="cc" href="#zz">target #zz</a>

＆＃13;

Answer 2

var elements = [];
$(".bb").each(function() {
  elements.push($(this).attr("href"));
});
console.log(elements);



$.each(elements, function(i,val) {


  $(val).css("background", "red");
});

div {
  height: 50px;
  margin-bottom: 10px;
  background:#fff9d3;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="aa"></div>
<div id="xx"></div>

<a class="bb" href="#aa">target #aa</a>
<a class="bb" href="#xx">target #xx</a>

<p>Not using an array and targeting a single element works however</p>
<div id="zz"></div>
<a class="cc" href="#zz">target #zz</a>

由于你想获得你创建的数组元素，而不是dom元素/对象，你可以使用：

$.each(elements, function(i,val) {


  $(val).css("background", "red");
});

通过$(val) - 您可以创建jQuery对象，并且您的脚本可以正常工作。

注意区别：http://api.jquery.com/jquery.each/和http://api.jquery.com/each/

使用从hrefs获取的ID数组来定位元素

2 个答案: