jQuery遍歷。 尋找同胞包括自己

Question

我正在使用jQuery遍歷在DOM元素之間跳轉。

首先，我有一個onClick函數：

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

在此函數內部，我將有關單擊內容的數據發送到另一個函數。

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

現在，我想從單擊元素$(this)遍歷到其父元素。 我想找到父母的兄弟姐妹，然后遍歷特定的兄弟姐妹。

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

我的問題是，當我想回溯到我來自的元素時，它沒有被列為兄弟姐妹，因為它不是兄弟姐妹...

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

控制台會給我兄弟姐妹，但不是一個U來自...

因此，當用戶單擊“ .size”時，我想向上移動到父級並返回到大小。...當用戶單擊“ .ant”時，我想向上移動到父級，然后向下到“。尺寸”...

我試圖對遍歷進行硬編碼：

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

但這是行不通的，因為它實際上不是兄弟姐妹。

那是什么 我又該如何解決呢？

如果不可能，我必須運行一些if / else語句，你猜...

更新

$(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)

問題
當我單擊“ .size”元素時，我的var inputSize將返回undefined。 那是因為它沒有被列為自身的同級物。

我知道這是按鍵，而不是單擊...

Answer 1

e.target將選擇當前輸入

 $(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

嗯，如果您要傳入$(this)作為thisObj我認為您不需要將thisObj嵌套在$() 。 （請參閱下面的注釋）

無論如何，您可以嘗試使用.parents('<grandparent>').find('<child>')因此基本上您是在樹上使用<grandparent>在更高一級遍歷，然后獲取與該子級匹配的所有后代選擇器。 那應該包括$(this)代表的三個分支。 但是，如果沒有看到HTML，很難確定地說。

**將jQuery對象分配給變量時的一個好習慣是使用$語法，即var $this = $(this)因此您知道以$開頭的任何東西都是jQuery對象。

Answer 3

在sulorTableRowWeight內部，您應該在thisobj變量中具有對clicked元素的引用。