JQUERY如何点击获取相同结构同级标签里的内容？

Question

代码如下：

<div class="box">
    <ul>
        <li>
            <div class="list">
                <div class="item">
                    <p><span>用户姓名</span></p>
                </div>
                <em>点击</em>
            </div>
        </li>
        <!-- 这里省略多个li相同结构 -->
        <li>
            <div class="list">
                <div class="item">
                    <p><span>用户姓名N</span></p>
                </div>
                <em>点击</em>
            </div>
        </li>
    </ul>
</div>

想要实现的效果，点击li里<em>点击</em>获取当前li里<p><span></span></p>span的内容...请问如何获取，非常感谢！~

Answer 1

$('.list em').each(function(){
    $('.list em').eq(i).click(function(){
        console.log($('.item').eq(i).find('span').html())
    })
})

方法有很多

$('.list em').click(function(){
    console.log(this.prev().find('span').html())
})

Answer 2

jq点击事件里
$(this).parent().parent().siblings().find('span').text();

Answer 3

$(this).closest('li').find('span').html()