Jquery在父div中选择div元素

时间:2017-01-17 12:54:21

标签: javascript jquery html

您好,希望您能帮助我。

我正在尝试选择另一个div中的div元素并存储它的id或类。我试着做这个简单的功能,看它是否有效:

$('div').on('click', function(){
    alert($(this).attr("id"));
});

然而,每次我点击任何div,例如id为“content”输出的div,我得到的是“content-link2”。

因此,我的问题是如何更改代码以便查看内部 div“content-link2”

<div id="content-link2">
    <div class="logo">
        <img class="images" id="image" src="#" alt="Your Logo">
    </div>
    <div contenteditable="true" id="content" class="draggable ui-widget-content refresh ui-draggable ui-draggable-handle" style="position: relative;"><p>hlo</p></div>
    <div id="comments">
        <form name="forma">
            <textarea name="commentUser" id="commentUser" class="refresh" cols="40" rows="5">Comments here...
            </textarea><br>
            <input type="submit" value="Ready!" id="send-data"><!--onClick="writeComment(e);"--> 
            <div id="editTxt" class="refresh" contenteditable="true">
                <p>This text can be by the user.</p>
            </div>
        </form>
    </div>
</div>

3 个答案:

答案 0 :(得分:1)

你因为事件冒泡而得到了这个

preg_match_all

答案 1 :(得分:1)

您需要对script稍作修改。

以下是警告单击任何元素的id的解决方案。如果它没有ID,则会显示undefined

$(document).on('click', function(e){
    alert($(e.target).attr("id"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content-link2">
    <title>Template 1</title>
    <link href="http://localhost/fyproject/public/templates/css.css" rel="stylesheet" type="text/css">


    <div class="logo">
        <img class="images" id="image" src="#" alt="Your Logo">
    </div>
    <div contenteditable="true" id="content" class="draggable ui-widget-content refresh ui-draggable ui-draggable-handle" style="position: relative;"><p>hlo</p></div>
    <div id="comments">
        <form name="forma">
            <textarea name="commentUser" id="commentUser" class="refresh" cols="40" rows="5">Comments here...
            </textarea><br>
            <input type="submit" value="Ready!" id="send-data"><!--onClick="writeComment(e);"--> 
            <div id="editTxt" class="refresh" contenteditable="true">
                <p>This text can be by the user.</p>
            </div>
        </form>
    </div>
</div>

答案 2 :(得分:0)

你很亲密,你需要做的是:

$('#content-link2 > div').on('click', function(){
    alert($(this).attr("id"));
});

这样您就可以定位父div的所有子元素。您可以看到an example here