Question

这是我创建的按字母顺序排列的表格，显示每封信中的顶级产品。 The table

我想添加一些jquery，所以当用户点击一封信时，刷新页面后，该字母会有一个不同的css，表示该字母是“活动的”。

$(document).ready(function() {

function yo(alpha) {

$('#alpha_ul li a ').removeClass("activeyo");
alpha.addClass("activeyo");

}          
$("#alpha_ul li a").click(function () {
            if (localStorage) localStorage['alpha'] = $(this).closest('li').index();
            yo($(this));
        });      

     if (localStorage && localStorage.alpha) {
    yo( $("#alpha_ul li a").eq(localStorage.alpha) );
} 
});

当我单击表格的第一行（＃ - F）时，脚本工作正常。但是如果我从第2行到最后一行单击，它会选择N +行元素！（正如你在图片中看到的，我选择“K”但是“L”字母有活动的css。如果我点击“N”，第三行“P”将获得活动的css等。）

我尝试了很多方法来编辑脚本，例如使用$（this）.parent（'li'），但选择“＃”元素。

每个表格元素都是一个左边浮动的“li”，每隔7“li”分隔一次。所以根据我的理解，它可能是我使用的Html代码使得jquery选择了错误的元素。那么什么是合适的选择器而不是最近的（）？

如果我没有为某人解释它，这就是我生成表格的完整方式：

<div <?php /* if ($checkstate == "" || $checkstate == NULL) {echo $swapstyle1; } */ ?>  id="full_table">
<div id="alpha_main_div">
<h3 style="color: #504D4C;font-size:16px;font-weight:700;" class="headers">Womens Perfume List By Letter</h3>
<ul id = "alpha_ul">
<li><a href="#">#</a></li>
<?php
$letters = range('A','Z');
$counter = 1;
$table ="" ;
foreach ($letters as $let) {
    if ($counter < 7 ) {
        $table .= '<li><a href="' . $link . '?letter=' . $let .'">'. $let . '</a></li>';
        $counter++;
        }
        else {
        $table .= '<br clear="left"/>';
        $table .= '<li><a  href="' . $link . '?letter=' . $let .'">' . $let . '</a></li>';
        $counter=1;
        }
        }
    $table.='<li>&nbsp;</li>';
    $table.= '</div></ul>';
    echo $table;
    echo '<br clear="left"/>';


?>

the fiddle that shows what happening

Answer 1

“br”元素会影响您尝试获取的索引值。删除“br”元素并在“ul”元素上使用固定宽度来实现您想要做的事情。这是fiddle

这里是ul元素的样子：

<ul id="alpha_ul">
    <li><a href="#">#</a></li>
    <li><a href="A">A</a></li>
    <li><a href="B">B</a></li>
    <li><a href="C">C</a></li>
    <li><a href="D">D</a></li>
    <li><a href="E">E</a></li>
    <li><a href="F">F</a></li>    
    <li><a href="G">G</a></li>
    <li><a href="H">H</a></li>
    <li><a href="I">I</a></li>
    <li><a href="J">J</a></li>
    <li><a href="K">K</a></li>
    <li><a href="L">L</a></li>
    <li><a href="M">M</a></li>    
    <li><a href="N">N</a></li>
    <li><a href="O">O</a></li>
    <li><a href="P">P</a></li>
    <li><a href="Q">Q</a></li>
    <li><a href="R">R</a></li>
    <li><a href="S">S</a></li>
    <li><a href="T">T</a></li>    
    <li><a href="U">U</a></li>
    <li><a href="X">X</a></li>
    <li><a href="V">V</a></li>
    <li><a href="W">W</a></li>
    <li><a href="Y">Y</a></li>
    <li><a href="Z">Z</a></li>        
</ul>

及其风格：

ul#alpha_ul {
list-style-type:none; 
width:300px;
}

jquery选择邻居元素而不是我想要选择的元素

1 个答案: