CODEWITHSUNDEEP
jquery
Tom
Tom

Reputation: 1071

jQuery - Get child input based on name selector

I've got an onclick event which is calling a function, passing the current div:

<div onclick="deleteline($(this));">

In my deleteline function, how do I get a child of the parent of $(this) where the name contains Qty?

In this example I'm looking to get the ProdQty input box:

<div>
    <input id="PrdQty" type="hidden" value="1">
    <div onclick="deleteline($(this));">
</div>

EDIT: This page is getting included multiple times within another page via an ajax call. Therefore if I assign the clickable div an ID, it's going to cause a conflict after this code is injected into the parent for the 2nd time.

As a result, I've used the suggestions below, kept the inline onclick and I'm getting the qty using: sender.parent().find('input[id*="Qty"]')

Upvotes: 3

Views: 21186

Answers (5)

hellsgate
hellsgate

Reputation: 6005

You can use CSS selectors for this in jQuery (http://api.jquery.com/category/selectors/)

So your example would be:

$(this).siblings("input[id*='Qty']")

That will return all the inputs at the same level as $(this) which have 'Qty' in their id as an array. If you only want the first one add .first() onto the end of the line, ie:

$(this).siblings("input[id*='Qty']").first()

Upvotes: 4

Shyju
Shyju

Reputation: 218722

I prefer to remove the onclick from the HTML markup because i love to write it in a n unobutrusive way. I would add a class name to the div to be act as the selector

<div>
  <input id="PrdQty" type="hidden" value="1">
  <div class="divtoCheck" />
</div>


$(function(){
    $(".divtoCheck").click(function(){
         var child=$(this).parent().find("input[id*='Qty']")
        alert(child.attr("id"));
    });

});

working sample http://jsfiddle.net/gKnf3/10/

Upvotes: 1

thecodeparadox
thecodeparadox

Reputation: 87073

   <div>
      <input id="PrdQty" type="hidden" value="1">
      <div id="getChild"></div>   // here I give an ID to you div.you can also  use class
   </div>


   // binding click event on #getChild div

    $('#getChild').on('click', function() {

       $(this).parent().find('input[id~="Qty"]');

    });

OR:

<div>
    <input id="PrdQty" type="hidden" value="1">
    <div onclick="deleteline(this);">
</div>


function deleteline($this) {
   $($this).parent().find('input[id~="Qty"]');
}

Upvotes: 1

Theron Luhn
Theron Luhn

Reputation: 4082

You will want to use the attribute contains selector that jQuery offers.

Here's some code I fiddled: http://jsfiddle.net/luhn/RrczZ/

Edit: All the other answers seem to be using the attribute contains word selector, which won't actually work....

Upvotes: 0

Wouter J
Wouter J

Reputation: 41934

Why not use the jQuery event API?

// make it as specific as you need
$('div').click(function() {
    // do something
});

And you can use the .parent([selector]) function in jQuery to get the parent. And in this example you can use the .prev([selector]) function also to get the previous element.

Upvotes: 2

Related Questions