Question

我是Jquery的新手，所以我无法弄清楚为什么不起作用。

我试图从ChildElement中提取id。

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>

Javascript

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

返回＆＃34; merchant_working_hours_attributes_1476029504945_close_time＆＃34;我做错了什么？来自select标签的ID？

Answer 1

当标识已知时，可以将标记用作选择器。由于几乎所有jQuery getter都返回第一个，所以不需要首先过滤

 "title": "Running through the park",
    "type": "Running",
    "distance": "10",
    "duration": [
        {
            "hours": "2"
        },
        {
            "minutes": "40"
        },
        {
            "seconds": "44"
        }
    ],
    "note": "Running in NY park."

Answer 2

使用jquery选择器和.children（）属性，并确保将其括在文档中。请注意，我正在通过单击触发该功能（您可能希望通过更改或其他操作执行此操作）并且我也是console.logging它用于显示目的。

＆＃13;

$(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);
  })
})

＆＃13;

<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>

＆＃13;

Answer 3

这很简单。 document.getElementsByClassName将返回元素的实时NodeList。要选择第一个，请在其后添加[0]。

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

或者，正如David Thomas所说：

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

或 jQuery ：

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

或：

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

Answer 4

您可以使用带有参数>的直接后代:first选择器，.attr()，"id"

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

Answer 5

这已经过测试并且正在使用，但使用了其他参考资料。

<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>



    <script>

        //All tested => jquery required
        var close_time_id =$(".mother").children()[0].id;
        $('.variable').html(close_time_id);
        console.log(close_time_id);

    </script>

Javascript / Jquery - 从ChildElement中提取id

5 个答案: