Как получить элемент внутри родительского div - PullRequest
Новая
       7

Как получить элемент внутри родительского div

0 голосов
/ 26 января 2019

Мне нужна помощь, чтобы получить элемент по имени от родительского элемента 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>

В приведенном выше примере у меня есть изображение, имя и цена автомобиля.Как я могу получить имя автомобиля, img и цену также для скрытого значения поля на getElementbyName в функции Addcar()?

Я хочу использовать Javascript, а не jQuery.

Ответы [ 4 ]

0 голосов
/ 27 января 2019

Сделай это 

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

});
0 голосов
/ 26 января 2019

Между тем, ответ Моники хороший, я чувствую, что document.querySelector() больше подходит для ... всего, когда вы ссылаетесь на элементы из DOM. Также getElementsByClassName() возвращает массив, который в этом примере бесполезен. Кроме того, querySelector() довольно знакомо, так как вы ссылаетесь на идентификатор, класс или ввод по его имени, как вы делаете это в CSS. Подобно: document.querySelector(".Car"); или document.querySelector("input[name='hdf_car']").

0 голосов
/ 26 января 2019 

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

0 голосов
/ 26 января 2019

Вы можете получить доступ к элементам, используя имена классов.

Надеюсь, это поможет! 

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