[英]How to get element inside parent div
我需要有關從父div按名稱獲取元素的幫助。
例
<div class="Car">
<div class="CarSepcification">
<img src="Car.jpg" name="CarImg">
<span class="CarName">BMW X5</span>
<span class="CarDetails">BMW X5 4.4L 2016 Black</span>
<div class="CarPrice">
<span class="Price">38,750</span><span>EUR</span>
<div>
<input type="hidden" value="BMW" name="hdf_car"/>
<img src="Add.jpg" onclick="AddCar(this)" />
</div>
</div>
</div>
</div>
在上面的示例中，我有汽車的圖像，名稱和價格。 如何通過函數Addcar() getElementbyName獲取隱藏字段值的汽車名稱，img和價格？
我想要使用Javascript，而不是jQuery。
您可以使用類名稱訪問元素。
希望這可以幫助！
console.log(document.getElementsByName('CarImg')[0].src); console.log(document.getElementsByClassName('CarName')[0].innerHTML) console.log(document.getElementsByClassName('Price')[0].innerHTML) console.log(document.getElementsByClassName('hidden')[0].value)
<div class="Car"> <div class="CarSepcification"> <img src="Car.jpg" name="CarImg"> <span class="CarName">BMW X5</span> <span class="CarDetails">BMW X5 4.4L 2016 Black</span> <div class="CarPrice"> <span class="Price">38,750</span><span>EUR</span> <div > <input class="hidden" type="hidden" value="BMW" name="hdf_car"/>//add a identifier to access the element from the DOM <img src="Add.jpg" onclick="AddCar(this)" /> </div> </div> </div> </div>
function AddCar(xxx) { console.log('This: ',xxx); var aCars = document.getElementsByClassName('Car'); // console.log(aCars); for (var i =0; i < aCars.length; i++) { var car = aCars[i]; // console.log(car); var obj = { img : car.getElementsByClassName('CarImg')[0].src, name : car.getElementsByClassName('CarName')[0].innerHTML, detail : car.getElementsByClassName('CarDetails')[0].innerHTML, price :car.getElementsByClassName('Price')[0].innerHTML, hidden : car.getElementsByTagName('input')[0].value, } console.log(obj); } }
<!DOCTYPE html> <html> <body> <div class="Car"> <div class="CarSepcification"> <img src="Car.jpg" name="CarImg" class="CarImg"> <span class="CarName">BMW X5</span> <span class="CarDetails">BMW X5 4.4L 2016 Black</span> <div class="CarPrice"> <span class="Price">38,750</span><span>EUR</span> <div> <input type="hidden" value="BMW" name="hdf_car"/> <img src="Add.jpg" onclick="AddCar(this)" /> </div> </div> </div> </div> <div class="Car"> <div class="CarSepcification"> <img src="Car.jpg" name="CarImg" class="CarImg"> <span class="CarName">BMW X125</span> <span class="CarDetails">123BMW X5 4.4L 2016 Black</span> <div class="CarPrice"> <span class="Price">138,750</span><span>EUR</span> <div> <input type="hidden" value="BMW2" name="hdf_car"/> <img src="Add.jpg" onclick="AddCar(this)" /> </div> </div> </div> </div> </body> </html>
更好？
做這個
let parentDiv = [...document.querySelectorAll('.Car')];
parentDiv.forEach((div) => {
let carImg =
div.getElementByTagName('img').getAttribute('name');
let carName = div.getElementByTagName('span').
[0].innerText;
let carDetails = div.getElementByTagName('span').
[1].innerText;
And so on
});
同時，莫妮卡的答案很好，我覺得document.querySelector()更適合...一切，當您引用DOM中的元素時。 另外， getElementsByClassName()返回一個數組，在此示例中，該數組是無用的。 另外， querySelector()非常熟悉，因為您可以像在CSS中那樣通過其名稱引用ID或類或輸入。 像： document.querySelector(".Car"); 或document.querySelector("input[name='hdf_car']") 。
如何在具有contenteditable的div元素中獲取標記文本的父元素？
[英]How to get the parent element of marked text inside div element with contenteditable?
如何在不超出父級的情況下讓 div 內的元素跟隨 cursor？
[英]How do I get an element inside a div to follow the cursor without going outside the parent?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.