如何在父div中获取元素
[英]How to get element inside parent div
问题描述
I want help about to get element by name from parent div. 
我需要有关从父div按名称获取元素的帮助。
Example 例
<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>
In above example I have image, name, and price of car. 在上面的示例中，我有汽车的图像，名称和价格。 How can I get car name, img and price also for hidden field value by getElementbyName in function Addcar() ? 如何通过函数Addcar() getElementbyName获取隐藏字段值的汽车名称，img和价格？
I want it using Javascript not jQuery. 我想要使用Javascript，而不是jQuery。
4 个解决方案
解决方案1
0 2019-01-26 14:30:33
You can access the elements using class names. 您可以使用类名称访问元素。
Hope this helps! 希望这可以帮助！
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>
解决方案2
0 2019-01-26 14:49:42
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>
Better? 更好？
解决方案3
0 2019-01-27 18:55:30
Do this 做这个
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
});
解决方案4
-2 2019-01-26 14:47:01
Meanwhile Monica's answer is good, I feel like document.querySelector() is more suitable for... everything, when you're referencing elements from the DOM. 同时，莫妮卡的答案很好，我觉得document.querySelector()更适合...一切，当您引用DOM中的元素时。 Also getElementsByClassName() returns an array, which in this example, is useless. 另外， getElementsByClassName()返回一个数组，在此示例中，该数组是无用的。 Also, querySelector() is pretty familliar since you reference an ID or a class or an input by its name like you do in CSS. 另外， querySelector()非常熟悉，因为您可以像在CSS中那样通过其名称引用ID或类或输入。 Like: document.querySelector(".Car"); 像： document.querySelector(".Car"); or document.querySelector("input[name='hdf_car']") . 或document.querySelector("input[name='hdf_car']") 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.