在jquery中按类名获取div id

时间:2014-11-20 11:39:40

标签: javascript jquery html css

我正在尝试使用jquery获取类名为“heading”的div的id。之后,我想将该ID传递给后面的代码并使用它。

点击我的链接后,调用了JS函数,但我猜我在内部做得不好,因为我得到了ar变量的空值而不是“16”。

有人可以帮我解决这个问题吗?我对jquery完全不熟悉,我仍然不太了解所有这些可能性。

这是我的HTML:

<div class="heading" id="16"><span>Nemanja Mosorinski</span><i>+</i></div>
<div class="details">
    <ul class="form">
        <li>
            <label>Name:</label><input type="text" class="in-text" /></li>
        <li>
            <label>Hours per week:</label><input type="text" class="in-text" /></li>
    </ul>
    <ul class="form">
        <li>
            <label>Username:</label><input type="text" class="in-text" /></li>
        <li>
            <label>Email:</label><input type="text" class="in-text" /></li>
    </ul>
    <ul class="form last">
        <li>
            <label>Status:</label><span class="radio"><label for="inactive">Inactive:</label><input type="radio" value="1" name="status" id="Radio5" /></span><span class="radio"><label for="active">Active:</label><input type="radio" value="2" name="status" id="Radio6" /></span></li>
        <li>
            <label>Role:</label><span class="radio"><label for="admin">Admin:</label><input type="radio" value="1" name="status" id="Radio7" /></span><span class="radio"><label for="worker">Worker:</label><input type="radio" value="2" name="status" id="Radio8" /></span></li>
    </ul>
    <div class="buttons">
        <div class="inner"><a href="javascript:;" id="updateMember" class="btn green">Save</a> <a href="javascript:;" class="btn red">Delete</a> <a href="javascript:;" class="btn orange">Reset Password</a></div>
    </div>
</div>

这是我的剧本:

<script type="text/javascript">
    $(function () {
        $('#updateMember').click(function () {
            $('.heading').closest(function () {
                var ar = this.id;
                $.ajax({
                    type: "POST",
                    url: 'team-members.aspx/UpdateTeamMember',
                    data: "{'ID':'" + ar + "'}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: fnsuccesscallback,
                    error: fnerrorcallback
                });
            });
        });
        function fnsuccesscallback(data) {
            alert(data.d);
        }
        function fnerrorcallback(result) {
            alert(result.statusText);
        }
    });
</script>

2 个答案:

答案 0 :(得分:3)

我认为您的意思是将整个功能传递给closest()

我们可以使用#updateMember的上下文来遍历(通过.closest().prev())到最近的.header,并获取其id使用.prop()

此外,传递给data的{​​{1}}属性接受Object Literal。

以下内容如何:

$.ajax()

注意:请使用控制台进行调试(这就是它的原因!)使用$(function () { $('#updateMember').click(function () { var ar = $(this).closest('.details').prev('.heading').prop('id'); $.ajax({ type: "POST", url: 'team-members.aspx/UpdateTeamMember', data: {"ID" : ar}, contentType: "application/json; charset=utf-8", dataType: "json", success: fnsuccesscallback, error: fnerrorcallback }); }); function fnsuccesscallback(data) { alert(data.d); } function fnerrorcallback(result) { alert(result.statusText); } }); 会导致更多的混乱而不是清除。

答案 1 :(得分:1)

而不是

data:"{'ID':'" + ar + "'}",

试试这个:

data: {"ID": ar },

并且如此处所提到的那样。希望它有所帮助