Question

我正在动态创建一个列表并将列表输入到多个section元素中，但是，我想要一个＆＃34;数据 - ＆＃34; li 元素上的属性，以使父节具有 h3 标题。 HTML结构如下，我到目前为止我的JS也在下面。如果您在下面的JS中看到我正在尝试创建＆＃39; productTitle＆＃39; 的变量。这是我试图获取当前列表的父级 h3 的部分。

HTML

<div id="GuestMemberTicketsContainer">
    <span class="zInput"><input title="1" data-productattendee="Senior" /></span>
    <span class="zInput"><input title="2" data-productattendee="Senior"/></span>
    <span class="zInput"><input title="3" data-productattendee="Senior"/></span>
    <span class="zInput"><input title="4" data-productattendee="Senior" /></span>

    <span class="zInput"><input title="1" data-productattendee="Adult" /></span>
    <span class="zInput"><input title="2" data-productattendee="Adult"/></span>
    <span class="zInput"><input title="3" data-productattendee="Adult"/></span>
    <span class="zInput"><input title="4" data-productattendee="Adult" /></span>
</div>


<section id="sectionOne">
   <h3>Section One Header</h3>
    <div id="attendeePickerOne" class="picker">
      <!--Dynamic UL get's generated here-->
   </div>
 </section>
 <section id="sectionTwo">
   <h3>Section Two Header</h3>
    <div id="attendeePickerTwo" class="picker">
      <!--Dynamic UL get's generated here-->
   </div>
 </section>

JS

$(document).ready(function () {

/*==============Testing dynamically adding items to list============*/

$("#GuestMemberTicketsContainer .zInput").click(function() {
     var attendeeListMember = $(".picker");
    var list = '<ul class="attendeeList" style="display:table">';

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

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

    $(this).find("input").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;
    }


    list += '</div>';
   $(attendeeListMember).append(list);

    //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>

Answer 1

你可以得到＆＃34; li＆＃34;的父节点。元素与element.parentNode 然后，您可以使用element.textContent

获取任何节点的文本

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

Answer 2

以下是我提出的问题：jsBin

方法是将事件处理程序更改为.change()本身的input，以及与数据属性值匹配的部分的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);

 });

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

2 个答案: