[英]jQuery traversing. Find siblings including itself
I'm using jQuery traversing to jump between DOM elements. 我正在使用jQuery遍历在DOM元素之间跳转。
First of i have a onClick function: 首先,我有一个onClick函数:
$(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. 现在,我想从单击元素
$(this)
遍历到其父元素。 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... 控制台会给我兄弟姐妹,但不是一个U来自...
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"... 因此,当用户单击“ .size”时,我想向上移动到父级并返回到大小。...当用户单击“ .ant”时,我想向上移动到父级,然后向下到“。尺寸”...
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... 如果不可能,我必须运行一些if / else语句,你猜...
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. 当我单击“ .size”元素时,我的var
inputSize
将返回undefined。 That´m's because it is not listed as a sibling to itself. 那是因为它没有被列为自身的同级物。
I know it's keyup, not click... 我知道这是按键,而不是单击...
e.target will select the current input 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>
Hmm, if you're passing in $(this)
as thisObj
I don't think you need to be nesting thisObj
in a $()
. 嗯,如果您要传入
$(this)
作为thisObj
我认为您不需要将thisObj
嵌套在$()
。 (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. 无论如何,您可以尝试使用
.parents('<grandparent>').find('<child>')
因此基本上您是在树上使用<grandparent>
在更高一级遍历,然后获取与该子级匹配的所有后代选择器。 That should include the branch of the three that $(this)
represents. 那应该包括
$(this)
代表的三个分支。 But it's hard to say for sure without seeing your HTML. 但是,如果没有看到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. **将jQuery对象分配给变量时的一个好习惯是使用
$
语法,即var $this = $(this)
因此您知道以$
开头的任何东西都是jQuery对象。
在sulorTableRowWeight
内部,您应该在thisobj
变量中具有对clicked元素的引用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.