获得最接近选定选项的最快方法

Question

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

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(){});

在表格中创建行时不会注册点击事件。

Answer 1

由于相邻，建议.prev()

获取匹配元素集中每个元素的前一个兄弟元素，可选地由选择器过滤。

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

Answer 2

看起来.siblings()方法也可以，我想用它没问题，因为只有兄弟。

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

Fiddle

Answer 3

看到那个问题，它解决了许多关于如何在没有“重记忆”实践的情况下指向精确元素的疑问 jQuery pitfalls to avoid

正如他们所说，我建议您尽可能使用 id 并且不要使用 .find() 或类作为上下文..

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

mplungjan 评论建议的编辑

编辑（再次...对不起）

这怎么可能是纯 javascript 中的解决方案（由@mplungjan 提出）...我尝试了一下，但无法到达 prevSibling 节点... 在这里看到。我认为您已经到达父节点，然后遍历子节点

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/