如何使用jQuery引用div的定义值

Question

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> 

Answer 1

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>