使用jQuery查找最近的<a>链接

Question

我有以下清单: -

    <div id="main-links-bottom-hover">

        <div id="About" class="hovers">

            <div id="main-about-div">

                <li class="lnk1 about-lnk"><a href="contact.php">Contact</a></li>
                <li class="lnk2 about-lnk"><a href="technology.php">Technology</a></li>
                <li class="lnk3 about-lnk"><a href="environment.php">Environment</a></li>
                <li class="lnk4 about-lnk"><a href="terms.php">T&amp;C's</a></li>
                <li class="lnk5 about-lnk"><a href="pricing.php">Pricing Policy</a></li>

            </div>

        </div>

    </div>

对于每一个<li>我想设置li打开最近的<a href>.

我试过了:-

    $('li').each(function(){
        var linkitem = $('.lnk1 a', this).attr('href');
        $('a.lnk1', this).attr('href' , linkitem) 
    });

但这似乎没有用,有什么建议吗？

添加CSS: -

#main-about-div {
    position:absolute;
    top:5px;
    left:5px;
}

.lnk1, .lnk2, .lnk3, .lnk4, .lnk5, .lnk6 {
    list-style-type: none;
    font-size:13px;
    margin-bottom:5px;
    margin-top:-5px;
    width:140px;
    height:30px;
    margin-left:-5px;
    cursor:pointer;
    border-bottom:1px dotted #1f5779;
}

.lnk1 a {
    position:absolute;
    top:-2px;
    left:5px;
    color:#FFF;
}

.lnk2 a {
    position:absolute;
    top:30px;
    left:5px;
    color:#FFF;
}

.lnk3 a {
    position:absolute;
    top:61px;
    left:5px;
    color:#FFF;
}

.lnk4 a {
    position:absolute;
    top:92px;
    left:5px;
    color:#FFF;
}

.lnk5 a {
    position:absolute;
    top:124px;
    left:5px;
    color:#FFF;
}

.lnk6 a {
    position:absolute;
    top:156px;
    left:5px;
    color:#FFF;
}

Answer 1

做这个:

#main-about-div a {
    display: block
}

由于你的LI元素每个只包含一个A元素,如果你使A元素成为块级别,它们应该占用它们的父LI元素的整个空间,然后单击LI元素将自动意味着相应的A元素是也点击了.

更新:看到你的CSS代码后.

#main-about-div li {
    list-style-type: none;
    font-size:13px;
    border-bottom:1px dotted #1f5779;
}
#main-about-div a {
    display: block;
    width: 140px;
    height: 30px;
    background: pink;
}

现场演示: http ://jsfiddle.net/simevidas/reSE8/(使用规范化的CSS)

注意A元素现在是如何阻塞的,并且在它们上设置尺寸而不是LI元素.