CODEWITHSUNDEEP
javascript
Dustin
Dustin

Reputation: 147

How can I reference a div's defined value using jquery

I am trying to reference a div with a predetermined value I made using jquery, and can't seem to find the appropriate method.

I've tried using the .find() and .attr() methods to no avail. I have a feeling this has to do with scope but I'm at a loss.

I am trying to make changes to the neighboring divs (.cube) based on their row and col value. my alert script keeps returning an undefined result.

 <div class="cube" id="1" row="1" col="1"></div>
<div class="cube" id="2" row="1" col="2"></div>
<div class="cube" id="3" row="1" col="3"></div>
<div class="cube" id="4" row="1" col="4"></div>

$(".cube").each(function() {
  var adjacentrowplus = +$(this).attr('row') + 1;
  var adjacentcolplus = +$(this).attr('col') + 1;
  var adjacentrowminus = +$(this).attr('row') - 1;
  var adjacentcolminus = +$(this).attr('col') - 1;
  if ($(".cube").attr("row") == adjacentrowplus) {
    console.log("the div equals the row");
  } else {
    console.log("the div doesnt equal the row");
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cube" id="1" row="1" col="1"></div>
<div class="cube" id="2" row="1" col="2"></div>
<div class="cube" id="3" row="1" col="3"></div>
<div class="cube" id="4" row="1" col="4"></div>

Upvotes: 1

Views: 167

Answers (1)

Randy Casburn
Randy Casburn

Reputation: 14165

Your logic is just a bit off. If you look at your if statement as pseudo code we can see it will never return true:

First iteration only:

if 1 == 1 + 1 then print "the div equals the row"

As you can see, adding one to the value of row, then checking that against the value of row doesn't make sense.

Instead, check the incremented row value against the id attribute.

In addition, you were checking against $(".cube").attr("row") which will always check only the first one. If that makes sense, I'll change my answer to reflect that. But, I assumed you wanted to check the currently iterating .cube.

EDIT To accommodate the updated goal: identify the neighboring elements

This becomes a much easier problem to solve then. Given the structure provided in the question below you will find a jQuery version and straight JavaScript solution:

let id = 2;

function findNeighborsJQ(id) {
  console.log('With jQuery:');
  console.log('Prev cube: ', $('#'+id).prev('div.cube').attr('id'));
  console.log('Next cube: ', $('#'+id).next('div.cube').attr('id'));
}

function findNeighbors(id) {
  console.log('Without jQuery:');
  console.log('Prev cube: ', document.getElementById(id).previousElementSibling.id);
  console.log('Next cube: ', document.getElementById(id).nextElementSibling.id);
}

console.log('Given and id of "'+id+'"...');
findNeighborsJQ(id);
findNeighbors(id);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cube" id="1" row="1" col="1"></div>
<div class="cube" id="2" row="1" col="2"></div>
<div class="cube" id="3" row="1" col="3"></div>
<div class="cube" id="4" row="1" col="4"></div>

Upvotes: 2

Related Questions