jQuery traversing. Find siblings including itself

Question

I'm using jQuery traversing to jump between DOM elements.

First of i have a onClick function:

$(document).on('keyup', '.size, .ant', function(){

Inside of this function I send data about what's clicked, to another function.

sulorTableRowWeight( $(this) );
function sulorTableRowWeight(thisobj){

Now, I'd like to traverse from the clicked element $(this) to its parent. I'd like to find the parent's siblings and then traverse down to a specific sibling.

var inputSize = $(thisobj).parent().siblings('.sizeTd').children('.size');

My problem is when I want to traverse back down to the element I came from, it is not listed as a sibling because it isn't a sibling...

var inputSize = $(thisobj).parent().siblings(); console.log(inputSize)

console will give me the siblings, but not the one U came from...

So, when a user clicks ".size" I'd like to traverse up to the parent and back to size.... When a user clicks ".ant" I'd like to traverse up to the parent and then down to ".size"...

I tried to hardcode the traversing:

var inputSize = $(thisobj).parent().siblings('.sizeTd').children('.size');

But it won't work because it is not actually a sibling.

So what is it? And how can I get back to it?

If it is not possible, I have to run some if/else statements, U guess...

UPDATE

$(document).on('keyup', '.size, .ant', function(){ 
  //Find changed <select> .tbody
  var tbodyId = $(this).parent().parent('tr').parent('tbody').attr('id'); 
  //Check <tbody> #id
  if(tbodyId === "cpTableBody"){
  }
  else if(tbodyId === "sulorTableBody"){ 
    sulorTableRowWeight( $(this) );
  }
  else if(tbodyId === "konturTableBody"){
    konturTableRowWeight( $(this) );
  }
  else if(tbodyId === "kantbalkTableBody"){
    kantbalkTableRowWeight( $(this) );
  }
})

//Function sulorTableRowWeight
function sulorTableRowWeight(thisobj){
    //Find the selected data-weight
    var selectedWeightmm3 = $(thisobj).parent().siblings('.selectTd').children('.select').find(':selected').data('weightmm3'); 

    //Find input .size value
    var inputSize = $(thisobj).parent().siblings('.sizeTd').children('.size'); console.log(inputSize)

PROBLEM
My var inputSize will return undefined when I click a ".size" element. That´m's because it is not listed as a sibling to itself.

I know it's keyup, not click...

Answer 1

e.target will select the current input

 $(document).on('keyup', '.size, .ant', function(e) { inputSize = $(e.target); if($(e.target).is('.ant')) {//test if the element is .ant inputSize = $(e.target).parent().find('.size');//get .size based on .ant } console.log(inputSize[0]); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <input class="size x1" placeholder="x1"> <input class="ant x1" placeholder="x1 ant"> </div> <div> <input class="size x2" placeholder="x2"> <input class="ant x2" placeholder="x2 ant"> </div> 

Answer 2

Hmm, if you're passing in $(this) as thisObj I don't think you need to be nesting thisObj in a $() . (See note below)

Anyway, you could try using .parents('<grandparent>').find('<child>') so basically you're traversing one higher level up the tree with <grandparent> , then getting all the descendants that match the child selector. That should include the branch of the three that $(this) represents. But it's hard to say for sure without seeing your HTML.

** A good practice when assigning jQuery objects to variables is to use $ syntax, ie var $this = $(this) so you know anything prepended with a $ is a jQuery object.

Answer 3

在sulorTableRowWeight内部，您应该在thisobj变量中具有对clicked元素的引用。