使用从href获取的ID数组到目标元素

Question

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

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

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");

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

<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>

Answer 1

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/

Answer 2

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

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");

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

<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>