Javascript jQuery：如何获取动态创建元素的父元素属性

我正在动态创建一个列表并将列表输入到多个节元素中，但是，我希望li元素上的“data-”属性具有父节的h3标题。下面是HTML结构，我的JS也在下面。如果您在下面的JS中看到，我正在尝试创建一个变量'productTitle'。这就是我试图获取当前列表的父级部分的位置h3

HTML

第一节标题
第二节标题

JS

$（文档）.ready（函数（）{
/*=============测试动态地将项目添加到列表中============*/
$（“#GuestMemberTicketContainer.zInput”）。单击（函数（）{
var AttendeListMember=$（“.picker”）；
var list='
；
var itemValue=$（this.find（“input”）.attr（“title”）；
var AttendeTitle=$（this）.find（“input”）.data（“productattendee”）；
//productTitle需要获取列表的直接部分H3。
var productTitle=$（AttendeListMember）.parents（“section”）.find（“h3”）.text（）；
对于（变量i=0；i；
var li='
“+AttendeTitle+”+”+（i+1）+
'7.00' +
“添加票据”+
“
”；
列表+=li；
}
列表+=''；
$（AttendeListMember）.附加（列表）；
//console.log（$（finalList.parents（“section”）.find（“.titleBar”）.text（））；
//$（list.zInput（）；
});
});

所需的HTML输出

  <section id="sectionOne">
   <h3>Section One Header</h3>
    <div id="attendeePickerOne" class="picker">
      <ul>
        <li class="zInput zCheckbox" title="Adult1" data-productname="Section One Header">
 <span class="museumTitle" style="display: table-cell;vertical-align:middle;">Adult 1</span>
 <span class="museumPrice" style="display:table-cell;vertical-align:middle;">7.00</span>
 <span class="museumSubTitle" style="display:table-cell;vertical-align:middle;">Add Ticket</span>
 </li>
  <li class="zInput zCheckbox" title="Adult2" data-productname="Section One Header">
 <span class="museumTitle" style="display: table-cell;vertical-align:middle;">Adult 2</span>
 <span class="museumPrice" style="display:table-cell;vertical-align:middle;">7.00</span>
 <span class="museumSubTitle" style="display:table-cell;vertical-align:middle;">Add Ticket</span>
 </li>
      </ul>


   </div>
 </section>
 <section id="sectionTwo">
   <h3>Section Two Header</h3>
    <div id="attendeePickerTwo" class="picker">
      <ul>
        <li class="zInput zCheckbox" title="Adult1" data-productname="Section Two Header">
 <span class="museumTitle" style="display: table-cell;vertical-align:middle;">Adult 1</span>
 <span class="museumPrice" style="display:table-cell;vertical-align:middle;">7.00</span>
 <span class="museumSubTitle" style="display:table-cell;vertical-align:middle;">Add Ticket</span>
 </li>
  <li class="zInput zCheckbox" title="Adult2" data-productname="Section Two Header">
    <span class="museumTitle" style="display: table-cell;vertical-align:middle;">Adult 2</span>
    <span class="museumPrice" style="display:table-cell;vertical-align:middle;">7.00</span>
    <span class="museumSubTitle" style="display:table-cell;vertical-align:middle;">Add Ticket</span>
 </li>
      </ul>
   </div>
 </section>

第一节标题


成人1
7
加票


成人2
7
加票


第二节标题


成人1
7
加票


成人2
7
加票

您可以使用element.parentNode获取“li”元素的父节点 然后可以使用element.textContent获取任何节点的文本

---

如果需要选择H3元素，还可以使用getElementbyTag。

我想到了以下几点：

方法是在

输入

本身上将事件处理程序更改为

.change（）

，并且节的ID与数据属性值匹配

不确定这是否正是您所需要的，因为问题有点不清楚

$("#GuestMemberTicketsContainer .zInput input").change(function() {

    var list = '<ul class="attendeeList" style="display:table">';

    var itemValue = $(this).attr("title");
    var attendeeTitle = $(this).data("productattendee");
    //productTitle is needs to get the list's immediate section H3. 
    var productTitle = $("#"+attendeeTitle).find('h3').text();

    for (var i = 0; i < itemValue; i++) {

    $(this).attr("title") + i + '</li>';
        var li = '<li class="zInput zCheckbox" title="' + attendeeTitle + ' "data-productname="' + productTitle + '"><span class="museumTitle" style="display: table-cell;vertical-align:middle;">' + attendeeTitle + " " + (i + 1) +
            '<span class="museumPrice" style="display:table-cell;vertical-align:middle;">7.00</span>' +
            '<span class="museumSubTitle" style="display:table-cell;vertical-align:middle;">Add Ticket</span>' +
            '</li>';

        list += li;

    }

    console.log(attendeeTitle, productTitle)

    list += '</div>';

   $("#"+attendeeTitle).find('ul').remove();
   $("#"+attendeeTitle).append(list);

 });

$（“#guestmemberticketcontainer.zInput输入”）.change（函数（）{
var list='
；
var itemValue=$（this.attr（“title”）；
var attendetitle=$（this.data（“productattendee”）；
//productTitle需要获取列表的直接部分H3。
var productTitle=$（“#”+AttendeTitle）.find（'h3'）.text（）；
对于（变量i=0；i；
var li='
“+AttendeTitle+”+”+（i+1）+
'7.00' +
“添加票据”+
“
”；
列表+=li；
}
console.log（与会者标题、产品标题）
列表+=''；
$（“#”+attendeeTitle）.find（'ul'）.remove（）；
$（“#”+与会者名称）。附加（列表）；
});

您在第一个HTML代码段中缺少data productattendee之后的“=”。您也可以使用

$（AttendeListMember）。最近的（“部分”）。查找（“h3”）

，在树中选择较少。您是否向所有

.picker

元素添加相同的列表，或者如何选择添加列表的位置？@skobaljic，我正在将相同的列表添加到.picker。这是因为我有一个由JS和HTML运行的票务Web应用程序，它将根据参加人数和年龄（老年人、成人、儿童）向多个活动（产品）添加“参与者”。然后，用户将能够选择哪些与会者将参加活动。一些成年人或所有成年人可能想参加，因此如果用户一开始就选择有4名成年人，那么他们可以选择只有2名成年人参加活动。

  <section id="sectionOne">
   <h3>Section One Header</h3>
    <div id="attendeePickerOne" class="picker">
      <ul>
        <li class="zInput zCheckbox" title="Adult1" data-productname="Section One Header">
 <span class="museumTitle" style="display: table-cell;vertical-align:middle;">Adult 1</span>
 <span class="museumPrice" style="display:table-cell;vertical-align:middle;">7.00</span>
 <span class="museumSubTitle" style="display:table-cell;vertical-align:middle;">Add Ticket</span>
 </li>
  <li class="zInput zCheckbox" title="Adult2" data-productname="Section One Header">
 <span class="museumTitle" style="display: table-cell;vertical-align:middle;">Adult 2</span>
 <span class="museumPrice" style="display:table-cell;vertical-align:middle;">7.00</span>
 <span class="museumSubTitle" style="display:table-cell;vertical-align:middle;">Add Ticket</span>
 </li>
      </ul>


   </div>
 </section>
 <section id="sectionTwo">
   <h3>Section Two Header</h3>
    <div id="attendeePickerTwo" class="picker">
      <ul>
        <li class="zInput zCheckbox" title="Adult1" data-productname="Section Two Header">
 <span class="museumTitle" style="display: table-cell;vertical-align:middle;">Adult 1</span>
 <span class="museumPrice" style="display:table-cell;vertical-align:middle;">7.00</span>
 <span class="museumSubTitle" style="display:table-cell;vertical-align:middle;">Add Ticket</span>
 </li>
  <li class="zInput zCheckbox" title="Adult2" data-productname="Section Two Header">
    <span class="museumTitle" style="display: table-cell;vertical-align:middle;">Adult 2</span>
    <span class="museumPrice" style="display:table-cell;vertical-align:middle;">7.00</span>
    <span class="museumSubTitle" style="display:table-cell;vertical-align:middle;">Add Ticket</span>
 </li>
      </ul>
   </div>
 </section>

$("#GuestMemberTicketsContainer .zInput input").change(function() {

    var list = '<ul class="attendeeList" style="display:table">';

    var itemValue = $(this).attr("title");
    var attendeeTitle = $(this).data("productattendee");
    //productTitle is needs to get the list's immediate section H3. 
    var productTitle = $("#"+attendeeTitle).find('h3').text();

    for (var i = 0; i < itemValue; i++) {

    $(this).attr("title") + i + '</li>';
        var li = '<li class="zInput zCheckbox" title="' + attendeeTitle + ' "data-productname="' + productTitle + '"><span class="museumTitle" style="display: table-cell;vertical-align:middle;">' + attendeeTitle + " " + (i + 1) +
            '<span class="museumPrice" style="display:table-cell;vertical-align:middle;">7.00</span>' +
            '<span class="museumSubTitle" style="display:table-cell;vertical-align:middle;">Add Ticket</span>' +
            '</li>';

        list += li;

    }

    console.log(attendeeTitle, productTitle)

    list += '</div>';

   $("#"+attendeeTitle).find('ul').remove();
   $("#"+attendeeTitle).append(list);

 });