jQuery:Element Selection based on multiple attribute

Question

I have following 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>

Here r1 is a Parent Row while r11,*r12* are child rows, parent has class li while children has l2. I am using following jQuery on click event of id=r1 where all subsquent Ids being with r1 and have class l2

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

I need a filtered result based on id matches pattern AND have class = l2. How can I achieve this?

Thanks in Advance

Looks ok to me. Do you have any problem with it? You might want to put l2 in quotation marks as well. Or better yet, just use the class selector: $('tr.l2[...]'). — Felix Kling
– Felix Kling, Commented Apr 2, 2012 at 0:23

Michal · Accepted Answer · 2012-04-02 04:32:43Z

3

EDIT This should do the trick:

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

Your selector does not work because you are using '|=' which matches a prefix followed by '-'. so if your naming convention for child rows was r1-1, r1-2 that selector would have been good. You need to use '^=' which selects attributes starting with a specified string.

Personally I would, instead of having ids on child rows, simply specify a parent id as a class on child rows - this makes things a bit simpler so all children of id=r1 would look like this

<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>

so to select child rows when a user clicks a parent row I would do this

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

})

but this is a matter of personal preference.

edited Apr 2, 2012 at 4:32

answered Apr 2, 2012 at 2:29

Michal

13.7k4 gold badges38 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Volatil3 Over a year ago

I ended up assinging multiple classes on each level like l2 r1 for first row, l2 r2 to second, so on and then call class based selector. I really liked your implementation. Will be helpful in future

Terry · Accepted Answer · 2012-04-02 04:08:58Z

0

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

Which means: give me all children with class .l2 of a parent with id prefixed with pattern

Edit: Sorry, noticed you were looking for prefix, updated code.

answered Apr 2, 2012 at 4:08

Terry

14.2k9 gold badges58 silver badges84 bronze badges

Collectives™ on Stack Overflow

jQuery:Element Selection based on multiple attribute

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest