如何获取组件父元素？点击新增按钮向父列表输出变量方案

嘿，我来帮你搞定这个需求！先说说你现有代码里的几个关键问题，这些问题会导致你点击New Button时无法精准定位到对应的父列表：

• 动态生成的元素重复用了同一个id（比如listwrapper、selected），ID在页面里必须是唯一的，这会让后续选择元素时直接找错目标
• new1()函数里用$("#listwrapper")只会选中页面里第一个匹配的列表，不是当前按钮所在的那个列表

下面是修正后的完整代码，我会一步步解释怎么实现你的需求：

第一步：修复重复ID的问题 #

我把模板里的固定ID改成了类名，动态生成列表的时候直接复制模板，这样就不会出现重复ID的问题了。另外给New Button的点击事件传递了this，这样就能拿到当前被点击的按钮元素，方便定位它的父列表。

第二步：精准获取父元素并输出变量 #

通过this拿到当前按钮后，用jQuery的.closest()方法向上查找最近的父列表（.consort类对应的ul），然后把你要输出的变量追加到这个列表里。同时也给你展示了怎么获取父元素的DOM对象。

修正后的CSS（和原来一致，不用改） #

.boardcanvas { position: relative; -webkit-box-flex: 1; flex-grow: 1; background-color: cadetblue; }
#board { white-space: nowrap; margin-bottom: 10px; overflow-x:auto; overflow-y:hidden; padding-right: 56px; background-color: rgb(95, 130, 131); position: absolute; display: inline-flex; }
.listwrapper{ height: 100%; width: 270px; vertical-align: top; white-space: nowrap; background-color: rgb(10, 73, 75); display: inline-block; margin-left:0; }
.controls{ padding:0; margin:0; }

修正后的HTML #

<body class = "boardcanvas">
<div id="board">
<div class = "controls">
<button onclick="addme()"> Add </button>
</div>
<!-- 把原来的id换成类，加上template类标记这是模板 -->
<div class ="listwrapper template" style="display:none">
<ul style ="margin:0; padding:0; list-style: none;" class ="consort">
<div class ="transparent">
<!-- 点击时传递this，拿到当前按钮 -->
<button onclick ="new1(this)">New button</button>
</div>
</ul>
</div>
</div>
<a id = "addlist" onclick ="change()" style ="color:inherit" href="#"> Add a List... </a>
</body>

修正后的jQuery代码 #

$(document).ready(function(){
    $('.controls').hide();
});

function change() {
    $('#addlist').replaceWith('<div class = "controls"><button onclick="addme()">Add</button></div>');
}

function addme() {
    // 复制模板列表，去掉template类并显示出来
    const newList = $('.listwrapper.template').clone().removeClass('template').show();
    $('#board').append(newList);
    $('.controls').appendTo('#board');
}

function new1(btn) {
    // 这里定义你要输出的变量，随便改内容
    const myVariable = "我是要输出的变量内容！";
    
    // 找到当前按钮所在的父列表，追加变量内容（用li包裹更符合列表结构）
    $(btn).closest('.consort').append(`<li>${myVariable}</li>`);
    
    // 如果需要获取父元素的原生DOM对象，可以这样做
    const parentListElement = $(btn).closest('.consort')[0];
    console.log("当前按钮的父列表元素：", parentListElement);
}

关键知识点拆解 #

• this关键字的用法：在按钮的onclick事件里传递this，就能直接拿到当前被点击的按钮元素，这是定位上下文的核心，不然你根本不知道用户点的是哪个按钮
• .closest()方法：这个方法会从当前元素开始向上遍历DOM树，找到第一个匹配选择器的祖先元素，完美解决了“找当前按钮所属父列表”的问题
• 动态元素的ID规范：动态生成元素绝对不能用固定ID，一定要用类名或者动态生成唯一ID，否则会出现各种选择器匹配错误的问题

这样修改后，每次点击New Button，都会把变量内容追加到它所在的那个父列表里，同时也能正确获取到对应的父元素啦！

内容的提问来源于stack exchange，提问作者sanjana