Using html tags with id+numbers to find them in jQuery

Question

Having an html code like this:

<table>
    <tr>
        <td bgcolor=yellow>LED #1</td>
        <td id=led0 bgcolor=red>ON</td>
    </tr>
    <tr>
        <td bgcolor=yellow>LED #2</td>
        <td id=led1 bgcolor=red>ON</td>
    </tr>
    <tr>
        <td bgcolor=yellow>LED #3</td>
        <td id=led2 bgcolor=red>ON</td>
    </tr>
    <tr>
        <td bgcolor=yellow>LED #4</td>
        <td id=led3 bgcolor=red>ON</td>
    </tr>
    <tr>
        <td>
            <button>number 1</button>
        </td>
    </tr>
    <tr>
        <td>
            <button>number 2</button>
        </td>
    </tr>
    <tr>
        <td>
            <button>number 3</button>
        </td>
    </tr>
</table>

I would like to achieve something like this:

$('button').click(function() {
  var index = $("button").index(this);   
 // alert(index);
  $("#led[index]").html('<div style="background:#cccccc" >OFF</div>');

  
});

In words: I want to detect the button pressed (which is already working) and then modify the html code of the td element with id="led[index]" and using the variable "index" to find the right led number.

Any idea?

Ricardo Lohmann · Accepted Answer · 2013-03-27 23:33:18Z

2

Cancatenate the following way:

$("#led" + index);

answered Mar 27, 2013 at 23:33

Ricardo Lohmann

26.4k7 gold badges86 silver badges84 bronze badges

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

Comments

Michael Garrison · Accepted Answer · 2013-03-28 00:12:48Z

1

I went one step further and made it so that you can toggle ON or OFF. Your main issue is that you did not concatenate index, this should be done like so + index +. I used the following jQuery code:

$('button').click(function() {
var index = $("button").index(this);   
// alert(index);
  // You must concatenate index with "+"
  if ($("#led"+index+":contains('ON')").length > 0)
    $("#led"+index).html("OFF").css("background-color", "red");
  else if ($("#led"+index+":contains('OFF')").length > 0)
    $("#led"+index).html("ON").css("background-color", "green");
});

I also made a working JSFiddle so that you can see it work.

You can put whatever HTML you want where the ON or OFF is changed.

edited Mar 28, 2013 at 0:12

answered Mar 28, 2013 at 0:00

Michael Garrison

9412 gold badges16 silver badges32 bronze badges

Comments

What have you tried · Accepted Answer · 2013-03-27 23:32:12Z

0

You would want to use $(this).attr("id"); and then concatenate the index to the #led id

        $('button').click(function() {
          var index = $(this).attr("id");
          $("#led" + index).html('<div id="led'+index+'" style="background:red" >ON</div>');

        // code
    });

HTML:

<button id="someID">

answered Mar 27, 2013 at 23:32

What have you tried

11.2k4 gold badges35 silver badges45 bronze badges

Comments

Steve · Accepted Answer · 2013-03-27 23:35:07Z

0

You need to make two edits to your code:

First, you need use the attr('id') method to get the index.

Secondly, you need to concatenate the index onto your jQuery selector.

$('button').click(function() {
    var index = $(this).attr('id');   
    $("#led"+index).html('<div id="led'+index+'" style="background:red" >ON</div>');
});

answered Mar 27, 2013 at 23:35

Steve

8,6487 gold badges42 silver badges54 bronze badges

Collectives™ on Stack Overflow

Using html tags with id+numbers to find them in jQuery

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related