admin管理员组
文章数量:1025465

Is there a way to get the element that is visually underneath or above a certain element?

The elements are part of a list, and I want to be able to navigate through the list using the arrow keys. Left/right moves to the previous/next sibling, but I have no idea what to do with up/down.

$(document).on('keydown', function(e) {
  console.log(e.which);

  var current = $('li.selected');

  switch (e.which) {
    case 37:
      current.prev().addClass('selected').siblings().removeClass('selected');
      break;

    case 39:
      current.next().addClass('selected').siblings().removeClass('selected');
      break;

    default:
      return true;
  }

  e.preventDefault();
});

$('li').on('click', function(e) {
  $(this).addClass('selected').siblings().removeClass('selected');
});

ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}
li {
  width: 50px;
  height: 50px;
  margin: 5px;
  border: 1px solid red;
}
li.selected {
  background: red;
}

<script src=".1.1/jquery.min.js"></script>
<ul>
  <li class="selected"></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Is there a way to get the element that is visually underneath or above a certain element?

The elements are part of a list, and I want to be able to navigate through the list using the arrow keys. Left/right moves to the previous/next sibling, but I have no idea what to do with up/down.

$(document).on('keydown', function(e) {
  console.log(e.which);

  var current = $('li.selected');

  switch (e.which) {
    case 37:
      current.prev().addClass('selected').siblings().removeClass('selected');
      break;

    case 39:
      current.next().addClass('selected').siblings().removeClass('selected');
      break;

    default:
      return true;
  }

  e.preventDefault();
});

$('li').on('click', function(e) {
  $(this).addClass('selected').siblings().removeClass('selected');
});

ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}
li {
  width: 50px;
  height: 50px;
  margin: 5px;
  border: 1px solid red;
}
li.selected {
  background: red;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="selected"></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Share Improve this question edited Jan 16, 2015 at 1:38 Mr. Polywhirl 48.9k12 gold badges94 silver badges145 bronze badges asked Jan 16, 2015 at 1:36 nice ass 16.7k8 gold badges53 silver badges92 bronze badges

you can read elements' positions and find the one to navigate to. – akonsu Commented Jan 16, 2015 at 1:41
1 I would remend using a <table> instead. Then you can navigate the rows and columns. – Ian Hazzard Commented Jan 16, 2015 at 1:41
No, he means that if the div flows, can you detect a neighboring div. (Think line wrapping) – Mr. Polywhirl Commented Jan 16, 2015 at 1:41
I want to avoid tables, because the number of columns is variable (as much as they can fit). But heights should be equal like in tables, that's why I chose flex... – nice ass Commented Jan 16, 2015 at 1:45

Add a ment |

3 Answers 3

Sorted by: Reset to default 5

I wrote a function to search sibling nodes and check their left position within the bounds of the element width.

function findDown(node) {
  return findInSiblings(node, node.nextAll());
}

function findUp(node) {
  return findInSiblings(node, node.prevAll());
}

function findInSiblings(node, siblings) {
  var x = node.offset().left,
    w = node.width() / 2;
  for (var i = 0; i < siblings.length; i++) {
    var sibling = $(siblings[i]);
    if (sibling[0].nodeType === 1) {
      var offset = sibling.offset().left;
      if (offset - w < x && offset + w > x) {
        return sibling;
      }
    }
  }
  return null;
}

Demo

$(document).on('keydown', function(e) {
  var current = $('li.selected');
  var node = getNode(current, e.which);
  if (node == null) {
    return true;
  }
  select(node);
  e.preventDefault();
});

$('li').on('click', function(e) {
  select($(this));
});

function select(node) {
  node.addClass('selected').siblings().removeClass('selected');
}

function getNode(selected, direction) {
  switch (direction) {
    case 37: // Left
      return selected.prev();
    case 38: // Up
      return findUp(selected);
    case 39: // Right
      return selected.next();
    case 40: // Down
      return findDown(selected);
  }
  return null;
}

function findDown(node) {
  return findInSiblings(node, node.nextAll());
}

function findUp(node) {
  return findInSiblings(node, node.prevAll());
}

function findInSiblings(node, siblings) {
  var x = node.offset().left,
    w = node.width() / 2;
  for (var i = 0; i < siblings.length; i++) {
    var sibling = $(siblings[i]);
    if (sibling[0].nodeType === 1) {
      var offset = sibling.offset().left;
      if (offset - w < x && offset + w > x) {
        return sibling;
      }
    }
  }
  return null;
}

ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}
li {
  width: 50px;
  height: 50px;
  margin: 5px;
  border: 1px solid red;
}
li.selected {
  background: red;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="selected"></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

A couple ideas:

1) You could always just calculate the number that are shown on each line since you can get the width of the page.

2) You could use document.elementFromPoint and test a point that is below your current element.

Get the offsetLeft property of the current element.

var currentLeft = current.prop("offsetLeft");

Look at each next or previous element until you find the one with the same offsetLeft property.

case 38:
  var el = current.prev();
  while (el.length && el.prop("offsetLeft") != currentLeft) {
    el = el.prev();
  }
  if (el.length) {
    current.removeClass("selected");
    el.addClass("selected");
  }
  break;

$(document).on('keydown', function(e) {
  console.log(e.which);

  var current = $('li.selected');
  var currentLeft = current.prop("offsetLeft");

  switch (e.which) {
case 37:
  current.prev().addClass('selected').siblings().removeClass('selected');
  break;

case 39:
  current.next().addClass('selected').siblings().removeClass('selected');
  break;

case 38:
  var el = current.prev();
  while (el.length && el.prop("offsetLeft") != currentLeft) {
    el = el.prev();
  }
  if (el.length) {
    current.removeClass("selected");
    el.addClass("selected");
  }
  break;

case 40:
  var el = current.next();
  while (el.length && el.prop("offsetLeft") != currentLeft) {
    el = el.next();
  }
  if (el.length) {
    current.removeClass("selected");
    el.addClass("selected");
  }
  break;

default:
  return true;
  }

  e.preventDefault();
});

$('li').on('click', function(e) {
  $(this).addClass('selected').siblings().removeClass('selected');
});

ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}
li {
  width: 50px;
  height: 50px;
  margin: 5px;
  border: 1px solid red;
}
li.selected {
  background: red;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="selected"></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Is there a way to get the element that is visually underneath or above a certain element?

The elements are part of a list, and I want to be able to navigate through the list using the arrow keys. Left/right moves to the previous/next sibling, but I have no idea what to do with up/down.

$(document).on('keydown', function(e) {
  console.log(e.which);

  var current = $('li.selected');

  switch (e.which) {
    case 37:
      current.prev().addClass('selected').siblings().removeClass('selected');
      break;

    case 39:
      current.next().addClass('selected').siblings().removeClass('selected');
      break;

    default:
      return true;
  }

  e.preventDefault();
});

$('li').on('click', function(e) {
  $(this).addClass('selected').siblings().removeClass('selected');
});

ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}
li {
  width: 50px;
  height: 50px;
  margin: 5px;
  border: 1px solid red;
}
li.selected {
  background: red;
}

<script src=".1.1/jquery.min.js"></script>
<ul>
  <li class="selected"></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Is there a way to get the element that is visually underneath or above a certain element?

The elements are part of a list, and I want to be able to navigate through the list using the arrow keys. Left/right moves to the previous/next sibling, but I have no idea what to do with up/down.

$(document).on('keydown', function(e) {
  console.log(e.which);

  var current = $('li.selected');

  switch (e.which) {
    case 37:
      current.prev().addClass('selected').siblings().removeClass('selected');
      break;

    case 39:
      current.next().addClass('selected').siblings().removeClass('selected');
      break;

    default:
      return true;
  }

  e.preventDefault();
});

$('li').on('click', function(e) {
  $(this).addClass('selected').siblings().removeClass('selected');
});

ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}
li {
  width: 50px;
  height: 50px;
  margin: 5px;
  border: 1px solid red;
}
li.selected {
  background: red;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="selected"></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

you can read elements' positions and find the one to navigate to. – akonsu Commented Jan 16, 2015 at 1:41
1 I would remend using a <table> instead. Then you can navigate the rows and columns. – Ian Hazzard Commented Jan 16, 2015 at 1:41
No, he means that if the div flows, can you detect a neighboring div. (Think line wrapping) – Mr. Polywhirl Commented Jan 16, 2015 at 1:41
I want to avoid tables, because the number of columns is variable (as much as they can fit). But heights should be equal like in tables, that's why I chose flex... – nice ass Commented Jan 16, 2015 at 1:45

Add a ment |

3 Answers 3

Sorted by: Reset to default 5

I wrote a function to search sibling nodes and check their left position within the bounds of the element width.

function findDown(node) {
  return findInSiblings(node, node.nextAll());
}

function findUp(node) {
  return findInSiblings(node, node.prevAll());
}

function findInSiblings(node, siblings) {
  var x = node.offset().left,
    w = node.width() / 2;
  for (var i = 0; i < siblings.length; i++) {
    var sibling = $(siblings[i]);
    if (sibling[0].nodeType === 1) {
      var offset = sibling.offset().left;
      if (offset - w < x && offset + w > x) {
        return sibling;
      }
    }
  }
  return null;
}

Demo

$(document).on('keydown', function(e) {
  var current = $('li.selected');
  var node = getNode(current, e.which);
  if (node == null) {
    return true;
  }
  select(node);
  e.preventDefault();
});

$('li').on('click', function(e) {
  select($(this));
});

function select(node) {
  node.addClass('selected').siblings().removeClass('selected');
}

function getNode(selected, direction) {
  switch (direction) {
    case 37: // Left
      return selected.prev();
    case 38: // Up
      return findUp(selected);
    case 39: // Right
      return selected.next();
    case 40: // Down
      return findDown(selected);
  }
  return null;
}

function findDown(node) {
  return findInSiblings(node, node.nextAll());
}

function findUp(node) {
  return findInSiblings(node, node.prevAll());
}

function findInSiblings(node, siblings) {
  var x = node.offset().left,
    w = node.width() / 2;
  for (var i = 0; i < siblings.length; i++) {
    var sibling = $(siblings[i]);
    if (sibling[0].nodeType === 1) {
      var offset = sibling.offset().left;
      if (offset - w < x && offset + w > x) {
        return sibling;
      }
    }
  }
  return null;
}

ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}
li {
  width: 50px;
  height: 50px;
  margin: 5px;
  border: 1px solid red;
}
li.selected {
  background: red;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="selected"></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

A couple ideas:

1) You could always just calculate the number that are shown on each line since you can get the width of the page.

2) You could use document.elementFromPoint and test a point that is below your current element.

Get the offsetLeft property of the current element.

var currentLeft = current.prop("offsetLeft");

Look at each next or previous element until you find the one with the same offsetLeft property.

case 38:
  var el = current.prev();
  while (el.length && el.prop("offsetLeft") != currentLeft) {
    el = el.prev();
  }
  if (el.length) {
    current.removeClass("selected");
    el.addClass("selected");
  }
  break;

$(document).on('keydown', function(e) {
  console.log(e.which);

  var current = $('li.selected');
  var currentLeft = current.prop("offsetLeft");

  switch (e.which) {
case 37:
  current.prev().addClass('selected').siblings().removeClass('selected');
  break;

case 39:
  current.next().addClass('selected').siblings().removeClass('selected');
  break;

case 38:
  var el = current.prev();
  while (el.length && el.prop("offsetLeft") != currentLeft) {
    el = el.prev();
  }
  if (el.length) {
    current.removeClass("selected");
    el.addClass("selected");
  }
  break;

case 40:
  var el = current.next();
  while (el.length && el.prop("offsetLeft") != currentLeft) {
    el = el.next();
  }
  if (el.length) {
    current.removeClass("selected");
    el.addClass("selected");
  }
  break;

default:
  return true;
  }

  e.preventDefault();
});

$('li').on('click', function(e) {
  $(this).addClass('selected').siblings().removeClass('selected');
});

ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}
li {
  width: 50px;
  height: 50px;
  margin: 5px;
  border: 1px solid red;
}
li.selected {
  background: red;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="selected"></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

本文标签： javascriptGet the element from above or belowStack Overflow

版权声明：本文标题：javascript - Get the element from above or below - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://it.en369.cn/questions/1745623445a2159715.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

369IT编程

javascript - Get the element from above or below - Stack Overflow

3 Answers 3

Demo

3 Answers 3

Demo

更多相关文章

javascript - Get the element from above or below - Stack Overflow

发表评论

推荐文章

javascript - Jquery click event of anchor tag not working - Stack Overflow

javascript - Liferay 6.2 modal add callback on close - Stack Overflow

wxmaxima wxdraw , wxdraw2d, wxdraw3d. How to change output to a *.png file instead of terminal computer screen - Stack Overflow

jquery - Using javascript and maybe regex to get numbers out text - Stack Overflow

next.js - Why modal returns always the first items of list? - Stack Overflow

热门文章

javascript - V8 Internals - Handling of Anonymous Functions - Stack Overflow

javascript - Make marquee when text overflows - Stack Overflow

javascript - Treewalker iteration - Stack Overflow

monorepo - pnpm locally referenced modules contain more than just dist folder contents - Stack Overflow

javascript - Why is my setInterval for a carousel not working? - Stack Overflow

javascript - What is phantom JS error code 1? - Stack Overflow

android - Kotlin: Convert binary InputStream to base64 string in blocksbuffered? - Stack Overflow

python - Find all &quot;a&quot; tags in multiple divs with same class with BeautifulSoup - Stack Overflow

core - Wordpress 4.8 - Can&#39;t find variable: wp

javascript - Get variable name instead of value - Stack Overflow

最新文章

windows设置断电重启开机后自动输入锁屏密码登录

Windows系统设置开机默认开启数字小键盘

Windows11 开机自动同步时间（开机时间不更新问题）

windows配置开机自启动软件或脚本

【Redis】Windows设置Redis为开机自启动

程序员刚毕业，先去大厂镀金还是先去小厂攒经验？

万象2008清空boss账户密码

【Tools】GitBook简明教程

oracle exadata celldisk 闪存盘受损导致性能下降

SDUT 2138 图结构练习——BFSDFS——判断可达性

javascript - Build Failed: Error resolving plugin [id: &#39;com.facebook.react.settings&#39;] in React Native v0.76 - St

Streamline Javascript to calculate ranges - Stack Overflow

customization - Can I develop a WordPress site without a domain?

javascript - ESLint rule for Object &amp; array dependencies in the React useEffect Hook - Stack Overflow

Blazor 8 MudBlazor Tooltip Y position incorrect after scrolling the page - Stack Overflow

python - Find all "a" tags in multiple divs with same class with BeautifulSoup - Stack Overflow

core - Wordpress 4.8 - Can't find variable: wp

javascript - Build Failed: Error resolving plugin [id: 'com.facebook.react.settings'] in React Native v0.76 - St

javascript - ESLint rule for Object & array dependencies in the React useEffect Hook - Stack Overflow