CODEWITHSUNDEEP
jqueryhtml
Rtra
Rtra

Reputation: 522

Selecting input hidden value inside Div

I am trying to select the hidden input value inside the last Div but it returns undefined value, I tried all the possible solutions available but nothing works for me properly. I know I am missing something.

Here is my HTML

<div class="col-xs-12 video_main_category" id="appendData">
    <div class="col-xs-12 col-sm-4 col-md-12 DataHomePage" id="itemList">
        <input name="CatShowID" type="hidden" value="1">
        <input name="ItemShowID" type="hidden" value="7">
    </div>
    <div class="col-xs-12 col-sm-4 col-md-12 HomePage" id="itemList">
        <input name="CatShowID" type="hidden" value="2">
        <input name="ItemShowID" type="hidden" value="6">
    </div>
    <div class="col-xs-12 col-sm-4 col-md-12 DataHomePage" id="itemList">
        <input name="CatShowID" type="hidden" value="3">
        <input name="ItemShowID" type="hidden" value="5">
    </div>
    <div class="col-xs-12 col-sm-4 col-md-12 DataHomePage" id="itemList">
        <input name="CatShowID" type="hidden" value="4">
        <input name="ItemShowID" type="hidden" value="4">
    </div>
</div>

Here is My JS

function appendData() {
    var MainLastID = $('#appendData').children('#itemList input:hidden[name=CatShowID]').last().val();
    alert(MainLastID);
}

Upvotes: 0

Views: 33

Answers (3)

jvk
jvk

Reputation: 2211

You can this in many solution to solve this, Here is my solution

$('#appendData').children(":last-child").find('input[name="CatShowID"]').val();

Upvotes: 0

Eddie
Eddie

Reputation: 26844

You can use #appendData input:hidden[name=CatShowID]

Note: ids should be unique, you can use itemList as a class.

var MainLastID = $('#appendData input:hidden[name=CatShowID]').last().val();

console.log(MainLastID);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-12 video_main_category" id="appendData">
  <div class="col-xs-12 col-sm-4 col-md-12 DataHomePage itemList">
    <input name="CatShowID" type="hidden" value="1">
    <input name="ItemShowID" type="hidden" value="7">
  </div>
  <div class="col-xs-12 col-sm-4 col-md-12 HomePage itemList">
    <input name="CatShowID" type="hidden" value="2">
    <input name="ItemShowID" type="hidden" value="6">
  </div>
  <div class="col-xs-12 col-sm-4 col-md-12 DataHomePage itemList">
    <input name="CatShowID" type="hidden" value="3">
    <input name="ItemShowID" type="hidden" value="5">
  </div>
  <div class="col-xs-12 col-sm-4 col-md-12 DataHomePage itemList">
    <input name="CatShowID" type="hidden" value="4">
    <input name="ItemShowID" type="hidden" value="4">
  </div>
</div>

Upvotes: 2

Tom G
Tom G

Reputation: 3660

Use this:

 $('#appendData > #itemList input:hidden[name=CatShowID]').last()

Instead of this:

$('#appendData').children('#itemList input:hidden[name=CatShowID]').last()

Your problem is that you have too much in the children selector (.children will only match direct descendants)

Upvotes: 1

Related Questions