CODEWITHSUNDEEP
javascriptjqueryarrays
Chri.s
Chri.s

Reputation: 1466

Use array of ID's obtained from hrefs to target elements

I'm having trouble why the below code isn't working as intended. I'm trying to obtain an array of ID's on the page from a content table, by saving the anchor tags href to the array. The array is constructed as I would have expected, but when I try to use it as the targeted element, nothing happens. I suspect that it's because the array is transformed into a string (which it would also seem from the console.log), but I still don't quite understand why it won't work. Do I have to transform the array into objects, and if so, how is that done? I haven't been able to find anything meeningful to me anywhere.

Edit: I have to do it this way (preferably at least) as the content table is meant to be created dynamically (not the same elements at all times), and the elements which the content table is pointing to should be styled accordingly.

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>

Upvotes: 1

Views: 54

Answers (2)

sinisake
sinisake

Reputation: 11328

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>

Since you want to get elements of array you have created, not dom elements/objects, you can use:

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


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

By $(val) - you create jQuery object, and your script will work.

Notice difference: http://api.jquery.com/jquery.each/ and http://api.jquery.com/each/

Upvotes: 1

gavgrif
gavgrif

Reputation: 15499

Your array contains the hrefs that you want to target - therefore they must be used in the selector as follows - select all a's with the hrefs in the array - 

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>

Upvotes: 1

Related Questions