Question

我是javascript和Jquery的新手，为满足屏幕要求而苦苦挣扎，所以如果问题愚蠢，请原谅

Previusly我正在使用静态代码（taht是text1，text2是静态的）

所以我以这种方式提供数据并且工作正常。

var text1 = "Honey with Chocolate Sauce  10 ML";
var text2 = "Honey with Carmel  10 ML";


$('#topping_tsection_'+id_attr_val).append('<aside><h6 class="tdHeading">'+name+ n+'</h6> \
    <section class="secclass"> \
    <a href="#">'+text1+'</a> \
    </section>  \
    <section class="secclass"> \
    <a href="#">'+text2+'</a> \
    </section> \
    </aside>');

以上所有工作正常

但是目前我正在以这种方式动态获取text1和text2

$(document).on("click", ".plus", function() {

    var str = '';
    $("#topping_tsection_" + id_attr_val + " aside:first a").each(function() {
        var category = $(this).text();
        str += '<aside><h6 class="tdHeading">' + name + n + '</h6><section class="secclass"><a href="#">' + category + '</a></section>'$('#topping_tsection_' + id_attr_val).append(str);
    });

});

但有了这个，我看到只有一个文字（蜂蜜巧克力酱10毫升）被添加到div

这是部分回复

<section id="topping_tsection_59">
   <i id="topping-close"></i>
   <aside>
      <h6 class="tdHeading">Regular, 50 Ml0</h6>
      <img src="images/arrow-topping.png">
      <section class="secclass"><a href="#">Honey with Chocolate Sauce  10 ML</a></section>
      <section class="secclass"><a href="#">Honey with Carmel  10 ML</a></section>
   </aside>
   <aside>
      <h6 class="tdHeading">Regular, 50 Ml1</h6>
      <img src="images/arrow-topping.png">
      <section class="secclass"><a href="#">Honey with Chocolate Sauce  10 ML</a></section>
      <section class="secclass"><a href="#">Honey with Carmel  10 ML</a></section>
   </aside>
</section>

任何人都可以告诉我。

Answer 1

因为使用ID选择元素，而对于ID，它只返回一个。

$("#topping_tsection_" + id_attr_val + " aside:first a")

你应该使用类选择这样的元素，即css类名是顶部部分

$('section[id^="topping_tsection_"]').each(function() {
             var category =   $(this).find('aside:first a').text();
str += '<aside><h6 class="tdHeading">' + name + n + '</h6><section class="secclass"><a href="#">' + category + '</a></section>'$('#topping_tsection_' + id_attr_val).append(str);
            });

的解释：选择id以“topping_tsection_”开头的所有部分，然后选择其第一个侧标签超链接文本。并保持原样。

Answer 2

我在这里工作： http://jsfiddle.net/Z6Et2/25/

我不确定你的实际来源是什么样的，所以我不得不即兴发挥：

HTML：

<div id="jsfiddle"> <a href="#" class=".plus">[+]</a>

    <section id="topping_tsection_59"> <i id="topping-close"></i>

        <aside>
             <h6 class="tdHeading">Regular, 50 Ml0</h6>

            <!-- <img src="images/arrow-topping.png" />-->
            <section class="secclass"><a href="#">Honey with Chocolate Sauce  10 ML</a>

            </section>
            <section class="secclass"><a href="#">Honey with Carmel  10 ML</a>

            </section>
        </aside>
        <aside>
             <h6 class="tdHeading">Regular, 50 Ml1</h6>

            <!-- <img src="images/arrow-topping.png" />-->
            <section class="secclass"><a href="#">Honey with Chocolate Sauce  10 ML</a>

            </section>
            <section class="secclass"><a href="#">Honey with Carmel  10 ML</a>

            </section>
        </aside>
    </section>
</div>

使用Javascript：

jQuery(document).ready(function () {
    console.log('document reqady');
    $(document).on("click", "a", function () {
        // Just to make it work:
        console.log('click event');
        id_attr_val = "59";
        var n = 1;
        var str = '';
        $("#topping_tsection_" + id_attr_val + " aside:first a").each(function () {
            n++;
            console.log(this);
            var category = $(this).text();
            str += '<aside><h6 class="tdHeading">' + name + n + '</h6><section class="secclass"><a href="#">' + category + '</a></section>';
            $('#topping_tsection_' + id_attr_val).append(str);
        });

    });
});

在循环内只有一个元素被附加到div

2 个答案: