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

时间:2017-12-17 08:56:31

标签: javascript jquery arrays

我遇到问题,为什么下面的代码没有按预期工作。我试图通过将锚标记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>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:1)

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

&#13;
&#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;
&#13;
&#13;

答案 1 :(得分: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/