Jquery get the first and second tag inside a div

Question

Jquery get the first and second tag inside a div

Navigation

#1 by (2 votes)
#2 by (1 votes)
#3 by (1 votes)

2

I'm trying to get the first and second elements inside a div. But I can not.

I want to get the two inputs inside the shipping_table . And by clicking on the inputs they will do a function.

HTML is:

<table class="table" id="shipping_table">   <tr style="cursor:pointer">
    <td style="width:16px;">
        <label class="radio">
            <input type="radio" id="s2ba82f8be158554d1aefa1fd27ea9001" data-deliverytime="13" value="PAC|27.8|13" name="shipping_method" checked="checked">         </label>
    </td>
    <td onclick="toggle_shipping('s2ba82f8be158554d1aefa1fd27ea9001');" style="width:120px;">
        PAC     </td>
    <td onclick="toggle_shipping('s2ba82f8be158554d1aefa1fd27ea9001');">

        <strong>R$ 27,80</strong><br><span class="label label-info">Entrega em torno de 13 dias úteis</span>        </td>
</tr>

<tr style="cursor:pointer">
    <td style="width:16px;">
        <label class="radio">
            <input type="radio" checked="checked" id="s527db0b075ea188067f95de4b5ab90e2" data-deliverytime="5" value="SEDEX|72.9|5" name="shipping_method">         </label>
    </td>
    <td onclick="toggle_shipping('s527db0b075ea188067f95de4b5ab90e2');" style="width:120px;">
        SEDEX       </td>
    <td onclick="toggle_shipping('s527db0b075ea188067f95de4b5ab90e2');">

        <strong>R$ 72,90</strong><br><span class="label label-info">Entrega em torno de 5 dias úteis</span>     </td>
</tr>

And the Javascript is:

$("#shipping_table input:eq(1)").click(function() {
  alert( "função aqui" );
});

$("#shipping_table input:eq(2)").click(function() {
  alert( "função aqui" );
});

I do not have much experience with Jquery. So if you can help I thank you.

html jquery

asked by anonymous 26.08.2015 / 15:50

3 answers

1

var element = $('#shipping_table').find('input');
element[0].click(function() {
  alert( "função aqui" );
});
element[1].click(function() {
  alert( "função aqui" );
});

26.08.2015 / 16:01

1

This solves

$(function (){
    $("#shipping_table input:eq(0)").click(function() {
      alert($(this).val());
    });

    $("#shipping_table input:eq(1)").click(function() {
      alert($(this).val());
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><tableclass="table" id="shipping_table">   <tr style="cursor:pointer">
    <td style="width:16px;">
        <label class="radio">
            <input type="radio" id="s2ba82f8be158554d1aefa1fd27ea9001" data-deliverytime="13" value="PAC|27.8|13" name="shipping_method" checked="checked">         </label>
    </td>
    <td onclick="toggle_shipping('s2ba82f8be158554d1aefa1fd27ea9001');" style="width:120px;">
        PAC     </td>
    <td onclick="toggle_shipping('s2ba82f8be158554d1aefa1fd27ea9001');">

        <strong>R$ 27,80</strong><br><span class="label label-info">Entrega em torno de 13 dias úteis</span>        </td>
</tr>

<tr style="cursor:pointer">
    <td style="width:16px;">
        <label class="radio">
            <input type="radio" checked="checked" id="s527db0b075ea188067f95de4b5ab90e2" data-deliverytime="5" value="SEDEX|72.9|5" name="shipping_method">         </label>
    </td>
    <td onclick="toggle_shipping('s527db0b075ea188067f95de4b5ab90e2');" style="width:120px;">
        SEDEX       </td>
    <td onclick="toggle_shipping('s527db0b075ea188067f95de4b5ab90e2');">

        <strong>R$ 72,90</strong><br><span class="label label-info">Entrega em torno de 5 dias úteis</span>     </td>
</tr>
        </table>

26.08.2015 / 16:11

Store multiple checkboxes in a column with only PHP + MySQL Manipulating the opacity of an object (control)

score 2 · Accepted Answer

The code you have is jQuery and it seems to me right, given that :eq() starts with 0 . In other words, the first input within this #shipping_table will be :eq(0) .

But if this content is dynamic then you need to delegate this event. In this case you can use .on() like this:

$("#shipping_table").on('click', 'input:eq(0)', function() {
  alert( "função 1 aqui" );
});

$("#shipping_table").on('click', 'input:eq(1)', function() {
  alert( "função 2 aqui" );
});

The difference in delegating the event using .on() is that the desired element does not have to be on the page in the at which time the event handset is registered. Only when the event is triggered will jQuery check it out.

Jquery get the first and second tag inside a div

3 answers

jsFiddle: link