Question

我有以下HTML

<tr id="r1" class="l1">
                <td><img class="plusminus" id="r1c1" src="assets/images/plus.png" border="0" />3/10/12</td>
                <td></td>
                <td></td>
                <td>4,449,371</td>
                <td>27,399</td>
                <td>$500,000</td>
                <td>8.91%</td>
                <td>0.68%</td>
                <td>0.62%</td>
                <td>$0.04</td>
                <td>791</td>
                <td>2.8%</td>
                <td>$1.39</td>
            </tr>
            <tr id="r11" class="l2">
                <td></td>
                <td></td>
                <td>iPad Winner</td>
                <td>700,302</td>
                <td>2,472</td>
                <td>98.88</td>
                <td>8.07%</td>
                <td>0.68%</td>
                <td>0.62%</td>
                <td>$0.04</td>
                <td>791</td>
                <td>2.8%</td>
                <td>$1.39</td>
            </tr>
            <tr id="r12" class="l2">
                <td></td>
                <td></td>
                <td>iPad Winner2</td>
                <td>300,302</td>
                <td>2,472</td>
                <td>98.88</td>
                <td>8.07%</td>
                <td>0.68%</td>
                <td>0.62%</td>
                <td>$0.04</td>
                <td>791</td>
                <td>2.8%</td>
                <td>$1.39</td>
            </tr>

      <tr id="r2" class="l1">
                <td><img class="plusminus"  id="r2c1" src="assets/images/plus.png" border="0" />4/10/12</td>
                <td></td>
                <td></td>
                <td>4,4555,55</td>
                <td>27,399</td>
                <td>$500,000</td>
                <td>8.91%</td>
                <td>0.68%</td>
                <td>0.62%</td>
                <td>$0.04</td>
                <td>791</td>
                <td>2.8%</td>
                <td>$1.39</td>
            </tr>

<tr id="r21" class="l2">
                <td><img class="plusminus"  id="r2c1" src="assets/images/plus.png" border="0" />4/10/12</td>
                <td></td>
                <td></td>
                <td>4,4555,55</td>
                <td>27,399</td>
                <td>$500,000</td>
                <td>8.91%</td>
                <td>0.68%</td>
                <td>0.62%</td>
                <td>$0.04</td>
                <td>791</td>
                <td>2.8%</td>
                <td>$1.39</td>
            </tr>

此处 r1 是父行，而 r11 ，* r12 *是子行，父类具有类li，而子行具有l2。我在id = r1的click事件上使用以下jQuery，其中所有后续ID都与r1一起并且具有类l2

var pattern = 'r1';//just for example here
$('tr[id|="'+pattern+'"][class=l2]')

我需要基于 id匹配模式的过滤结果并且具有class = l2 。我怎样才能做到这一点？

先谢谢

Answer 1

修改这应该可以解决问题：

var pattern = 'r1';//just for example here $('tr[id^="'+pattern+'"][class=l2]')

您的选择器不起作用，因为您使用的“| =”匹配前缀后跟“ - ”。因此，如果子行的命名约定是r1-1，则r1-2选择器本来是好的。您需要使用'^ ='来选择以指定字符串开头的属性。

就个人而言，我不会在子行上使用id，只需将父ID指定为子行上的类 - 这会使事情变得更简单，因此id = r1的所有子项看起来都是这样的

<tr id="r1" class="l1"><td>I am a parent row</td></tr> <tr class="l2 r1"><td>I am a child row of r1</td></tr>

所以当用户点击父行时选择子行我会这样做

$(".l1").click(function(){ var sel = $(this).attr("id"); var children = $("table").find("." + sel) })

但这是个人偏好的问题。

Answer 2

$('id|=["' + pattern + '"] > .l2')

这意味着：给我所有带有。

前缀的父类 .l2 的孩子

编辑：抱歉，注意到您正在寻找前缀，更新代码。

jQuery：基于多个属性的元素选择

2 个答案: