1

我正在尝试使用 jQuery<li>根据前面的<ul>文本添加新的<h3><ul>

我<h3>在页面上有几个无序列表。

列表 HTML：

<h3 class="category">
    Interactive Learning
</h3>
<ul>
    <li><a href="http://ocw.mit.edu/courses/#electrical-engineering-and-computer-science">MIT Open Courseware</a></li>
    <li><a href="http://www.codecademy.com/#!/exercises/0">Codecademy</a></li>
    <li><a href="https://p2pu.org/en/schools/school-of-webcraft/">P2PU: School of Webcraft</a></li>
    <li><a href="https://www.coursera.org/category/cs-programming">Coursera</a></li>
    <li><a href="http://www.udacity.com/">Udacity</a></li>
    <li><a href="http://code.google.com/edu/">Google Code University</a></li>
    <li><a href="https://developer.mozilla.org/en-US/learn">Mozilla Developer Network</a></li>
</ul>

表单 HTML：

<form id="addRec_form" action="classes/resources/addResource.php" method="post">
    <p><select name="categoryList" id="categoryList">
        <option value="0">Select a category to add to</option>
        <?php
            $categories = array(
                1 => "Microsoft Dreamspark",
                "Video Tutorials",
                "Interactive Learning",
                "Language Documentation",
                "IDEs and Text Editors",
                "Additional Tools and Resources"
                );

                for ($i = 1; $i <= 6; $i++)
                    print "<option value=\"$i\">$categories[$i]</option><br />";
                ?>
    </select></p>
    <p>Resource name: <input type="text" name="recName" id="recName" /></p>
    <p>Resource URL: <input type="text" name="recURL" id="recURL" /></p>
    <p><input type="submit" name="submitAddRec" value="Add resource" id="submitAddRec" /></p>
</form>

jQuery：

$.ajax ({
type: 'post',
url: '/classes/resources/addResource.php',
data: {
    recName: $('#recName').val(),
    recURL: $('#recURL').val()
},
success: function(data) {
    if (data === 'added') {
        $('h3.category').each( function() {
            var cate = $('#categoryList option:selected').text();
            var title = $('#recName').val();
            var url = $('#recURL').val();
            var newListItem = '<li><a href=\"' + url + '\">' + title + '</a></li>';
            if ($(this).text() == cate) {
                $(this).next('ul').append(newListItem);
                $('ul').listview('refresh');
            }
        });
        $('span#resError').fadeIn(400).text('Resource added successfully. Add another?');
   }
   else
       $('span#resError').fadeIn(400).text('There was an error adding this resource');
   }
});

但是，没有添加任何内容<ul>。任何想法为什么？

4

1 回答 1

0

使用.next()而不是.closest() （就像ul你旁边的h3那样）

$(this).next('ul').append(newListItem);
于 2013-05-27T19:51:56.183 回答