获取最接近所选选项的最快方式

Fastest way to get closest selected option

本文关键字：方式 选项 最接近 获取      更新时间：2023-09-26

我很想知道在按钮旁边获得最接近的所选选项（值）的好方法是什么。我想出了两种不同的方法，但不确定哪一种更好。

var find1 = $(this).closest('td').find(':selected').val();
var find2 = $(this).closest('td').children().eq(0).val();

我创建了一个jfiddle来帮助http://jsfiddle.net/9kxces0n/3/

如果你好奇我为什么使用：

$(document).on('click', '.get-col3-value', function(){});

这是因为我使用"添加行"按钮创建行，并且需要能够注册事件。如果我做了一个简单的

$(".get-col3-value").click(function(){});

在表中创建行时，它不会注册click事件。

由于它们是相邻的，我建议.prve（）

获取匹配元素集中每个元素的紧挨在前的同级元素，可以选择由选择器进行筛选。

var find3 = $(this).prev().val();

你也可以给表格一个ID并进行

$("#tableid").on("click",".get-col3-value",function() ...

缩短到输入的路径

FIDDLE

普通JS:

function getPreviousSibling(obj) {
  var sib=obj.previousSibling;
  while (sib.nodeType!=1) sib=sib.previousSibling;
  return sib;
}
window.onload=function() {
  var classname = document.getElementsByClassName("get-col3-value");
  var myObj = function(){
   console.log(getPreviousSibling(this).value)
  } 
  for(var i=0;i<classname.length;i++){
    classname[i].addEventListener('click', myObj,false);
  }
}

FIDDLE

看起来.siblings（）方法也能工作，我想使用它是可以的，因为只有兄弟。

var find2 = $(this).siblings().val();

Fiddle

看到这个问题，它解决了许多关于如何在没有"大量内存"实践的情况下指向精确元素的疑问避免的jQuery陷阱

正如他们所说，我建议你尽可能多地使用id，不要使用.find（）或类作为上下文。。

在您的代码中，如果您无法通过select选项上的id进行限制，请尝试尽可能多地限制上下文，例如在表上放置id。

编辑建议由mplungjan评论

编辑（再次…抱歉）

它怎么可能是纯javascript的解决方案（由@mplungjan提出）。。。我尝试了一下，但没能到达上一个Sibling节点。。。看这里。我认为您必须转到父节点，然后遍历子节点

var classname = document.getElementsByClassName("get-col3-value");
var myObj = function(){
   console.log(this.previousSibling.tagName)
}
for(var i=0;i<classname.length;i++){
        classname[i].addEventListener('click', myObj,false);
}

http://jsfiddle.net/81hk9gw3/44/

相关文章：