jQuery没有基于h3文本向ul添加新列表项

Question

我正在尝试使用 jQuery 根据 <h3> 中的文本在 <ul> 之前添加新的 <li> 到 <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> 中没有添加任何内容。任何想法为什么？

Answer 1

使用.next() 而不是.closest()（因为ul 在您的h3 旁边）

$(this).next('ul').append(newListItem);