获取子DOM的父DOM元素

问题描述：

我有我继承的这个HTML代码。我不确定在表格元素中是否有按钮元素是最佳做法，但这就是我给出的。获取子DOM的父DOM元素

我需要能够从<button>（子）元素中获得<table>（父元素）元素。我尝试使用.parent（）或.closest（），但它不适用于我给它的HTML。

任何建议让JS工作？这里是的jsfiddle

function f1(event) 
{ 
$.when(
$(this).parent('table#fsg').css("background-color", "red"), 
console.log('gff')) 
}

'$（ “＃DFG”）父（）的CSS（ “背景色”。 “red”）' - 不需要在parent（）函数中放置大括号内的任何内容。 –

在这种情况下，重复的建议将无法回答由于表格结构造成的问题。 –

这是正确的，我知道.parent（）的典型用法很简单，但是我的XML结构不允许它工作。 –

答

你的例子在小提琴中发生了几件事。

首先关闭按钮THERE会在许多浏览器中渲染OUTSIDE表 - 这是无效的HTML。
秒你的代码只是奇数 - $.when？那个有什么用？
第三个代码永远不会执行该功能 - 就像您通常点击按钮时一样。
你通常比CSS更直接地添加一个类，CSS的修改可能并不总是你想做的。
通过ID选择一个包含按钮的表格比标签和ID更好，即#mytableid比table#mytableid更好 - 尤其是给出了嘶嘶声引擎的从右到左的选择器性质 - 说（通过id找到一个元素（快速）然后找到一个有该id的表格（不是那么快） - 因为一个ID在文档中是唯一的使用
从一个按钮到遍历元素使用.parents()与选择器即.parents("#mytableid")或者如果你不知道id只是.parents('table')
- 注意我用.parents()这里不是单数.parent()作为th在将得到父元素，但该表不是button的父母，这是按钮

SO的祖先，因为这里是HTML的部分更新和代码做一些事情用它。

function f1(event) { 
    $(this).parents('#fsg').addClass('myred'); 
    console.log('gff'); 
} 
$('#dfg').on('click',f1);

HTML与按钮移动：

<table id="fsg"> 
    <tr> 
    <th>Company 
     <button id="dfg"> 
     text 
     </button> 
    </th> 
    <th>Contact</th> 
    <th>Country</th> 
    </tr> 
    <tr> 
    <td>Alfreds Futterkiste</td> 
    <td>Maria Anders</td> 
    <td>Germany</td> 
    </tr> 
    <tr> 
    <td>Centro comercial Moctezuma</td> 
    <td>Francisco Chang</td> 
    <td>Mexico</td> 
    </tr> 
    <tr> 
    <td>Ernst Handel</td> 
    <td>Roland Mendel</td> 
    <td>Austria</td> 
    </tr> 
    <tr> 
    <td>Island Trading</td> 
    <td>Helen Bennett</td> 
    <td>UK</td> 
    </tr> 
    <tr> 
    <td>Laughing Bacchus Winecellars</td> 
    <td>Yoshi Tannamuri</td> 
    <td>Canada</td> 
    </tr> 
    <tr> 
    <td>Magazzini Alimentari Riuniti</td> 
    <td>Giovanni Rovelli</td> 
    <td>Italy</td> 
    </tr> 
</table>

更新小提琴玩：https://jsfiddle.net/MarkSchultheiss/vyukyqsu/1/

$ .when确实很奇怪，我使用它来在某处加载加载器GIF，但由于某种原因，我在JSFiddle中删除了它。提供执行回调函数的简单方法（https://api.jquery.com/jquery.when/）。此外，我最终修改了我的HTML结构，因此我不再需要使用.parent API。但我很欣赏写作 –

答

请注意以下事项：虽然你把按钮“内部”表 - 它是无效的。

，如果你检查元素（在Chrome：右键单击按钮 - >选择检查从菜单元素），你会清楚地看到，按钮被放置外表元素

，这也是为什么

$("button#dfg").parent('table#fsg').css("background-color", "red")

到：从改变家长选择

$("button#dfg").parent().css("background-color", "red")

会画画整个身体与红色背景

Conslusion：当你使用一个表 - 请放置该按钮为有效的表元素（TD元素中）

答

一个表不能表定义后立即包含一个按钮。详情请参阅HTML element。

相反，您可以在单元格中插入一个按钮。在这种情况下，您可以使用.closest()。但是，因为你的桌子有一个ID，你可以简单地引用它。

的片段：

$("#fsg").css("background-color", "red")

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<table id="fsg"> 
 
    <tr> 
 
    <th>Company</th> 
 
    <th>Contact</th> 
 
    <th>Country</th> 
 
    </tr> 
 
    <tr> 
 
    <td>Alfreds Futterkiste</td> 
 
    <td>Maria Anders</td> 
 
    <td>Germany</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Centro comercial Moctezuma</td> 
 
    <td>Francisco Chang</td> 
 
    <td>Mexico</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Ernst Handel</td> 
 
    <td>Roland Mendel</td> 
 
    <td>Austria</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Island Trading</td> 
 
    <td>Helen Bennett</td> 
 
    <td>UK</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Laughing Bacchus Winecellars</td> 
 
    <td>Yoshi Tannamuri</td> 
 
    <td>Canada</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Magazzini Alimentari Riuniti</td> 
 
    <td>Giovanni Rovelli</td> 
 
    <td>Italy</td> 
 
    </tr> 
 
</table> 
 

 
<button id="dfg">text</button>

答

，如果你想改变表格的背景颜色，你不需要parent属性，你可以通过其ID访问元素

$(function(){ 
    $("#dfg").click(function(){ 
     $("#fsg").css("background-color","red"); 
    }); 
})

https://jsfiddle.net/p4v69cda/

获取子DOM的父DOM元素

相关推荐