Question

我想动态插入此功能，但我不知道为什么它无效。

这是我的jQuery功能......

 $(document).ready(function () {
        $('body').removeClass('no-js');
        //$('#my-carousel-1').carousel();
        $('#my-carousel-2').carousel({
            itemsPerPage: 6,
            itemsPerTransition: 6,
            speed: 500
        });
        $('#my-carousel-3').carousel({
            itemsPerPage: 6,
            itemsPerTransition: 6,
            easing: 'linear',
            noOfRows: 2
        });



        $('#MainContent_btnAddTag').click(function () {
            var inp = $("#MainContent_txtSearch").val();
            if ($.trim(inp).length > 0) {

                var num = 1 + Math.floor(Math.random() * 7);

                var lit = '<li value="0" class="color-' + num + '">testInsert</li>';

                $('#my-carousel-2 ul').append(lit);
            }
        });
    });

我的HTML，有一些不同的东西，我不能像cssClass或类似的东西那样改变。

<div class="frmfield">
<WWTB:WWTextBox runat="server" ID="txtSearch" CssClass="tBox" LabelValue="Search"
 Text="Search" ErrorMessage="Please enter a" 
 ValidationType="NotBlank" ErrorClass="error"></WWTB:WWTextBox>
 <div class="frmbtnblock">
 here my button to add tags
 <asp:Button ID="btnAddTag" Text="Add tag" CssClass="btn btnRight" runat="server" />
 </div>
 </div>
 <div class="frmfield">
 <div id="my-carousel-2" class="carousel">
 <ul id="ulSelected">
 <%-- here my new li --%>
 </ul>
 </div>
 </div>

Answer 1

$('ul#ulSelected').append('<li value="0" class="color-' + num + '">testInsert</li>');

Answer 2

您可以使用jQuery构造新的li元素，以编程方式设置其属性并将其附加到ul。

var $ul = $('#ulSelected');

$('<li>')
  .attr('value', 0)
  .addClass('color-' + num)
  .text('testInsert')
  .appendTo($ul);

我发现这种风格比Javascript中包含大量的HTML更能使代码更具可读性。

在<ul>动态</ul> </li>中插入<li>

2 个答案: