jQuery-使用选择器查找href

Question

Background Information:

I'm trying to find the value in the attribute "row_id" in an href. What will trigger this logic is when the user clicks on a "Save changes" button / image.

Problem Description

The jquery code I have right now is returning the contents of the second cell instead of the one with the href in it. So from the HTML sample code below, I need to extract 21586 from

 "<a href="index.php?page=row&amp;row_id=21586">Row SAA:HH1</a>"

HTML Code

The button that triggers the jquery logic is in the 4th cell of the row, and the row_id is in the href in the 5th cell.

 <tr>
    <td id="21581">
        <img src="?module=chrome&amp;uri=pix/tango-user-trash-16x16-gray.png" title="1 rack(s) here" height="16" width="16" border="0">
    </td>
    <td><div id="location_name">SAA:HH-123</div></td>
    <td><div id="row_name">SAA:HH1</div></td>
    <td>
         <input tabindex="1" name="edit" class="edit" src="?module=chrome&amp;uri=pix/pencil-icon.png" id="21581" title="Edit row" type="image" border="0">&nbsp;
         <input tabindex="1" style="display: none;" name="submit" class="icon" src="?module=chrome&amp;uri=pix/tango-document-save-16x16.png" title="Save changes" type="image" border="0">
   </td>
   <td>
        <a href="index.php?page=row&amp;row_id=21586">Row SAA:HH1</a>
   </td>
 </tr>

Jquery Code

    //save button handler
    $(".icon").click(function(e){
            //find the <a href that has the row id embbeded in it
            var row_id = $(this).parent().siblings().children($('a[href$="row_id"]'));
            console.log($(row_id).text());
    });

Any suggestions would be appreciated.

Answer 1

You could try this:

http://jsfiddle.net/vsLy0rfx/

$(".icon").click(function(e){
        //find the <a href that has the row id embbeded in it
        var row_link = $(this).parent().siblings().find('a[href*="row_id"]')
        var row_id = row_link.attr('href').split('row_id=')[1];
        console.log(row_id);
});

Answer 2

check the console, it returns 21586. i used .closest() and .find() to navigate and find the <a> in the corresponding row. then i got the href attribute and split it to find the desired id

 $(document).ready(function() { $('.icon').on('click', function() { var href = $(this).closest('tr').find('a').attr('href'); var id = href.split('&')[1].split('=')[1]; console.log(id); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td id="21581"> <img src="?module=chrome&amp;uri=pix/tango-user-trash-16x16-gray.png" title="1 rack(s) here" height="16" width="16" border="0"/> </td> <td><div id="location_name">SAA:HH-123</div></td> <td><div id="row_name">SAA:HH1</div></td> <td> <input tabindex="1" name="edit" class="edit" src="?module=chrome&amp;uri=pix/pencil-icon.png" id="21581" title="Edit row" type="image" border="0"/>&nbsp; <input tabindex="1" style="" name="submit" class="icon" src="?module=chrome&amp;uri=pix/tango-document-save-16x16.png" title="Save changes" type="image" border="0"/> </td> <td> <a href="index.php?page=row&amp;row_id=21586">Row SAA:HH1</a> </td> </tr> </table> 

Answer 3

Try using following

var result = $('a[href]',$(this).parent().parent()).attr('href').split("=").pop();

//result will be equal to 21586

Answer 4

Try this . Could be used universally for any url and parameter value.

$.getUrlParamValue = function(link, parameter){
    var results = new RegExp('[\?&]' + parameter + '=([^&#]*)').exec(link);
    return results[1] || 0;
}

var value  = $.getUrlParamValue ($("a").attr("href"),'row_id');
alert(value);

http://jsfiddle.net/r2xsse9v/