CODEWITHSUNDEEP
javascriptjquery
user1301037
user1301037

Reputation: 533

Javascript / Jquery - Extract the id from a ChildElement

I'm a pretty new to Jquery so I can't figured out why that is not working.

I'm trying to extract the id from a ChildElement.

Html:

<div class="merchant_working_hours_close_time">
  <select id="merchant_working_hours_attributes_1476029504945_close_time">
    <option value="">close</option>
    <option value="00:00:00">0h00</option>
    <option value="00:30:00">0h30</option>
    <option value="01:00:00">1h00</option>
    <option value="01:30:00">1h30</option>
    <option value="02:00:00">2h00</option>
    <option value="02:30:00">2h30</option>
    <option value="03:00:00">3h00</option>
  </select>
</div>

The Javascript

var close_time_id = document.getElementsByClassName("merchant_working_hours_close_time").firstElementChild.attr('id');
$('.variable').html(close_time_id);

What i'm doing wrong to return the "merchant_working_hours_attributes_1476029504945_close_time" id from select tag?

Upvotes: 0

Views: 87

Answers (5)

Dennisrec
Dennisrec

Reputation: 333

This is tested and is working but used other reference.

//All tested => jquery required
var close_time_id = $(".mother").children()[0].id;
$('.variable').html(close_time_id);
console.log(close_time_id);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mother">
  <a href="#" id="first_child">11111111111111111</a>
  <a href="#" id="second_child">222222222222222222222</a>
  <a href="#" id="last_child">33333333333333333</a>
</div>

Upvotes: 0

Syntac
Syntac

Reputation: 1777

It's farly simple. document.getElementsByClassName will return a live NodeList of elements. To pick the first, add a [0] after it.

var close_time_id = document.getElementsByClassName("merchant_working_hours_close_time")[0].firstElementChild.getAttribute("id");

or, as David Thomas suggested:

var close_time_id = document.querySelector('.merchant_working_hours_close_time > :first-child').id;

or in jQuery:

var close_time_id = $(".merchant_working_hours_close_time").children().first().attr("id");

or:

var close_time_id = $(".merchant_working_hours_close_time > :first-child").attr("id");

Upvotes: 0

gavgrif
gavgrif

Reputation: 15509

Use jquery selectors and the .children() property and make sure you enclose it in a document ready. Note that I am triggering the function off a click (you might want to do it off a change or other action) and also I am console.logging it for display purposes.

$(document).ready(function(){
  $('.merchant_working_hours_close_time').click(function(){
var close_time_id =$(this).children(0).attr('id');
console.log(close_time_id); //gives merchant_working_hours_attributes_1476029504945_close_time
$('.variable').text('The id of the child element is: ' + close_time_id);
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="merchant_working_hours_close_time">
  <select id="merchant_working_hours_attributes_1476029504945_close_time">
    <option value="">close</option>
    <option value="00:00:00">0h00</option>
    <option value="00:30:00">0h30</option>
    <option value="01:00:00">1h00</option>
    <option value="01:30:00">1h30</option>
    <option value="02:00:00">2h00</option>
    <option value="02:30:00">2h30</option>
    <option value="03:00:00">3h00</option>
  </select>
 <span class='variable'></span>
</div>

Upvotes: 1

charlietfl
charlietfl

Reputation: 171690

Can use the tag as selector when it's known . Since almost all jQuery getters return the first it really isn't needed to filter for first

$(".merchant_working_hours_close_time > select").attr('id');

Upvotes: 1

guest271314
guest271314

Reputation: 1

You can use direct descendants > selector, :first, .attr() with parameter "id"

var close_time_id = $(".merchant_working_hours_close_time > :first").attr("id");

Upvotes: 0

Related Questions