jQuery selector for specific class

Question

I have a similar table like this:

 <table>
        <tr>
            <th class="theader"> .theader </th>
            <th class="theader"> .theader </th>
            <th class="theader"> .theader </th>
        </tr>
        <tr>
            <td class="troe"> <input type='text' class='lat' name='lat[]' /> </td>
            <td class="trow"> <input type='text' class='lat' name='long[]' /> </td>
            <td class="trow">
                <input type='text' class='place' name='place[]' />
                 <span class="check"></span> 
            </td>
        </tr>
        <tr>
            <td class="troe"> <input type='text' class='lat' name='lat[]' /> </td>
            <td class="trow"> <input type='text' class='lat' name='long[]' /> </td>
            <td class="trow">
                <input type='text' class='place' name='place[]' />
                 <span class="check"></span> 
            </td>
        </tr>
        <tr>
            <td class="troe"> <input type='text' class='lat' name='lat[]' /> </td>
            <td class="trow"> <input type='text' class='lat' name='long[]' /> </td>
            <td class="trow">
                <input type='text' class='place' name='place[]' />
                 <span class="check"></span> 
            </td>
        </tr>
    </table>

that actually looks like this picture: see the table Now if I write a jQuery script to select any specific .check class (i.e. third row-third cell-span) and write any html message, what should be the selector? As you know if I use $('.check').html("Hello World"); then it prints Hello World in all the spans. I need to print the Hello World only in a specific span. TIA.

eloborate more like on what event you want to select third row third cell span? have you tried anything on your end — Bhushan Kawadkar, Sep 07 '18 at 13:15
@BhushanKawadkar suppose each of the cell of that table is an input box and i want to select the span on blur() event. — Sophia Jose, Sep 07 '18 at 13:20
actually this will not reflect the actual project i'm working on, this is just a case study. — Sophia Jose, Sep 07 '18 at 13:21
do you want to make table fields editable on click or double click? something like https://jsfiddle.net/u7ofjprw/87/ — Bhushan Kawadkar, Sep 07 '18 at 13:23
@SophiaJose if you need more help after this question (specifically about setting html in an nth selector), please ask a new question - it keeps the existing answers matching the original question. — freedomn-m, Sep 07 '18 at 13:29
@freedomn-m I have edited my table, can you pls see once again? — Sophia Jose, Sep 07 '18 at 13:30
@SophiaJose as per my comment above, please revert your question to the original and ask a new question. — freedomn-m, Sep 07 '18 at 14:04

freedomn-m · Answer 1 · 2018-09-07T13:21:23.693

You can use :eq(n) (selector) or .eq(n) (jquery method) (both 0-based) to target a specific, index-based element, eg:

$(".check:eq(2)").text("hello world")
$(".check").eq(2).text("hello world")

$(".check:eq(2)").text("hello world (2)")
$(".check").eq(1).text("hello world (1)")

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <th class="theader"> .theader </th>
        <th class="theader"> .theader </th>
        <th class="theader"> .theader </th>
    </tr>
    <tr>
        <td class="troe"> .trow </td>
        <td class="trow"> .trow </td>
        <td class="trow"> <span class="check"></span> </td>
    </tr>
    <tr>
        <td class="troe"> .trow </td>
        <td class="trow"> .trow </td>
        <td class="trow"> <span class="check"></span> </td>
    </tr>
    <tr>
        <td class="troe"> .trow </td>
        <td class="trow"> .trow </td>
        <td class="trow"> <span class="check"></span> </td>
    </tr>
</table>

That's great, but i need to select **.check** class on `blur()` event for any input field of that row, in that case how can I get the selector? TIA — Sophia Jose, Sep 07 '18 at 13:40

VVV · Accepted Answer · 2018-09-07T13:51:33.677

0

I suggest you use :eq()

To select the third row, third cell, span, you could use something like this

$( "table tr:eq(3) .check" ).text('CONTENT');

Here's a working fiddle

Regarding your comment, I updated the code in the fiddle to this

$('input').on('blur', function() {
    var t = $(this);
    t.closest('tr').find('.check').text('Hello World');
})

What this does is when you click outside the input field (blur event), it get's the row element and searches for the .check element. Instead of .text, you can do whatever you want with it once it's selected.

edited Sep 07 '18 at 13:51

answered Sep 07 '18 at 13:17

VVV

7,563
3
34
55

That's great, but i need to select **.check** class on `blur()` event for any input field of that row, in that case how can I get the selector? TIA – Sophia Jose Sep 07 '18 at 13:40
@SophiaJose I have updated the answer above. – VVV Sep 07 '18 at 13:49
Thanks a lot..!!! :) – Sophia Jose Sep 07 '18 at 13:51

score 0 · Answer 3 · answered Sep 07 '18 at 13:19

you can make use of nth-child and get third row third cell span. see below code

$(function(){
  $("table tr:nth-child(4) td:nth-child(3) span.check").html("Changed text");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <th class="theader"> .theader </th>
        <th class="theader"> .theader </th>
        <th class="theader"> .theader </th>
    </tr>
    <tr>
        <td class="troe"> .trow </th>
        <td class="trow"> .trow </th>
        <td class="trow"> <span class="check"></span> </th>
    </tr>
    <tr>
        <td class="troe"> .trow </th>
        <td class="trow"> .trow </th>
        <td class="trow"> <span class="check"></span> </th>
    </tr>
    <tr>
        <td class="troe"> .trow </th>
        <td class="trow"> .trow </th>
        <td class="trow"> <span class="check"></span> </th>
    </tr>
</table>

score 0 · Answer 4 · answered Sep 07 '18 at 13:19

try using :nth-child(2)

$(function() {
  $("tr:nth-child(2)").find('.check').html('test');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th class="theader"> .theader </th>
    <th class="theader"> .theader </th>
    <th class="theader"> .theader </th>
  </tr>
  <tr>
    <td class="troe"> .trow </th>
      <td class="trow"> .trow </th>
        <td class="trow"> <span class="check"></span> </th>
  </tr>
  <tr>
    <td class="troe"> .trow </th>
      <td class="trow"> .trow </th>
        <td class="trow"> <span class="check"></span> </th>
  </tr>
  <tr>
    <td class="troe"> .trow </th>
      <td class="trow"> .trow </th>
        <td class="trow"> <span class="check"></span> </th>
  </tr>
</table>

jQuery selector for specific class

4 Answers4