2

I am curious to what would be a good practice in getting the closest selected option (value) next to a button. I have came up with two different ways but not sure which one is better.

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

I have created a jfiddle to help http://jsfiddle.net/9kxces0n/3/

If you are curious why I use:

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

It is because I am creating rows using an "add row" button and need to be able to register the event. If I did a simple

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

It wouldn't register the click event when creating a row in the table.

Piotr Dajlido
  • 1,982
  • 15
  • 28
Dot Batch
  • 608
  • 6
  • 17

3 Answers3

2

Since they are adjacent, I suggest .prev()

Get the immediately preceding sibling of each element in the set of matched elements, optionally filtered by a selector.

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

Also you can give the table an ID and do

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

to shorten the path to the input

FIDDLE

Plain 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

mplungjan
  • 169,008
  • 28
  • 173
  • 236
0

It looks like .siblings() method works too, and I guess it's alright to use it because there's only sibling.

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

Fiddle

jyrkim
  • 2,849
  • 1
  • 24
  • 33
  • But if they are adjacent, .next() and .prev() would likely be faster if there are more than one – mplungjan Mar 18 '15 at 15:31
  • 1
    @mplungjan you got a good point :-) Nevertheless, it was fun to try out siblings() method in this context. – jyrkim Mar 18 '15 at 15:35
0

See that question, it resolves many doubts about how to point to exact element without "heavy memory" practices jQuery pitfalls to avoid

As they say I suggest you to make use of id as much as possible and no to use the .find() or the classes as a context..

in your code if you are not able to restrict by id on the select option try to restrict the context as much as possible, putting an id on the table for example.

Edit suggested by mplungjan comment

Edit (again...sorry)

How could it be the solution (proposed by @mplungjan) in pure javascript...I make a try but could'nt reach the prevSibling node... see it here. I think you have go up to the parent and then iterate across the childnodes

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/

Community
  • 1
  • 1
Frnnd Sgz
  • 236
  • 1
  • 4
  • 19
  • My suggestion of solution was wrong....but if you take five minuts to read the question I linked you may find a good solution....or may be you can ask @mplungjan... – Frnnd Sgz Mar 19 '15 at 08:40
  • 1
    http://jsfiddle.net/mplungjan/1rh9zbkg/ - while (sib.nodeType!=1) sib=sib.previousSibling; – mplungjan Mar 19 '15 at 12:13
  • @mplungjanonly one more question...sorry! why the prevSibling is returning a text nodeType...as I see the prevSibling of the button will be adjacent – Frnnd Sgz Mar 19 '15 at 12:54
  • See the update to my original answer and the fiddle. You need to skip the text nodes (whitespace such as space and line feeds) – mplungjan Mar 19 '15 at 12:55
  • Oh my god...it considers the space and line feeds as text I would never figured out!!!... – Frnnd Sgz Mar 19 '15 at 13:01