Question

我正在填充一个朋友列表，使用ajax调用返回json数组的php脚本。我使用朋友名称填充每个列表项并在其旁边放置一个按钮。名称和按钮都在列表项中。当我点击按钮时，我想找到朋友的名字，然后我可以将其发布到另一个脚本，将其从朋友列表中删除。同样，当用户点击侧面按钮时，我需要选择整个列表项，这样我就可以立即从无组织列表中删除它。我遇到的问题是我试图调用类似$（this）.find（'font'）。text（）;但这只是指单击的按钮而不是整个列表项。我确信这是一件很简单的事情，我忽略了它，但现在已经给了我很长时间的悲伤。

HTML

<ul data-role="listview" data-inset="true" id="friends" data-theme="a" 
data-divider- theme="a">
    <li data-role="list-divider"><h3>Friends</h3></li>
</ul>

Javascript

    function getFriendsList(){
    var searchType = "friend";
    var friendList = "";
        var friendName = "";
        var friendPoints = "";
    var name = "";
    $.post('friendScript.php', {
        searchType : searchType,
    }, function(data){
        $.each(data, function(index, value){
            $.each(value, function(index, item){
            if(index == 0){
                friendName = item;
            }
            if(index == 1){
                friendGratii = item;
            }   
        });
        friendList += '<li class="friend"><a href=""><h3>' + 
                                  '<font id="friendsName">' + 
                                  friendName + 
                                  '</font>' + " - " + 
                                  friendPoints + 
                                  '</h3></a>' + 
                                  '<a href="" id="defriend" data-icon="delete">' +
                                  "Remove Friend " + '</a>' + '</li>';
    });
    $('#friends').append(friendList).listview('refresh');
            $('#friends').find('li:has(font)').find('#defriend')
            .unbind("click").bind("click",  
                function(){
        var clickedFriend = $(this);
            name = $(this).find('.friend').text(); //HERE IS THE PROBLEM IT 
                                                        //ALWAYS RETURNS AN EMPTY STRING
                        $.post('defriendScript.php', {
                friendName : name,
            }, function(data){
                if(data != "success"){
                alert(data);
                }
                if(data == "success"){
                    $(clickedFriend).remove();
                }
            });
        });
    }, "json"); 
    };

Answer 1

$（this）将引用被点击的按钮。

$(this).find('something')将查看按钮包含的HTML元素。 $(this).closest('something')将查看包含该按钮的HTML元素。 $(this).siblings('something')将使用相同的直接父级按钮查看HTML元素。

你可能想要像

这样的东西

$(this).siblings('font');

Answer 2

有几个问题。主要的一点是find搜索元素的后代，而不是它的兄弟姐妹，这就是你想要的。另一个是你使用多个相同的id s，这是错误的。所以，这里是包含该修复的一般清理，至少是一个开始：

function getFriendsList() {
    var searchType = "friend";
    var friendName = "";
    var friendPoints = "";

    $.post('friendScript.php', {
        searchType: searchType,
    }, function(data) {
        var friends = $('#friends');

        $.each(data, function(index, value) {
            $.each(value, function(index, item) {
                if(index == 0) {
                    friendName = item;
                } else if(index == 1) {
                    friendGratii = item;
                }   
            });

            friends.append(
                $('<li>').addClass('friend')
                    .append(
                        $('<a>').prop('href', '#').append(
                            $('<h3>').append(
                                $('<span>').addClass('friendName').text(friendName),
                                ' - ',
                                friendPoints
                            )
                        ),
                        $('<a>').prop('href', '#').addClass('defriend').attr('data-icon', 'delete').text('Remove Friend')
                    )
            );
        });

        friends.listview('refresh');

        friends.find('.defriend').unbind('click').click(function(e) {
            var name = clickedFriend.prev('.friendName').text();

            $.post('defriendScript.php', {
                friendName: name
            }, function(data) {
                if(data === "success") {
                    $(clickedFriend).remove();
                } else {
                    alert(data);
                }
            });

            e.preventDefault();
        });
    }, "json");
}

Answer 3

你这样做：

name = $(this).find('.friend').text();

$(this)将是#defriend元素，它是您<li>的子元素。执行$(this).find('.friend')会在按钮中搜索类friend的元素。哪个不是你想要的。试试这个：

name = $(this).parent().text();

Answer 4

ID必须在页面中是唯一的，但您重复使用相同的ID。将所有重复的ID分类到课堂上。

按钮没有“查找”的后代。

您可以考虑向按钮或父li添加数据属性。

<a href="#" class="defriend" data-icon="delete" data-friend="friend name here" >

然后在点击处理程序中：

var name= $(this).data('friend')

在动态<ul>按钮上单击Jquery </ul> </li>查找<li>的文本

4 个答案: