Получить родителя третьего порядка

191

05 июня 2019, 15:50

Есть HTML кусочек следующего вида:

<div id='blockGiver2'>
    <form class='float_left'>
        <label>Представляемое лицо: 
            <select id="subjectDropDown2" onChange='insertValue1(this, nonclient);'> 
                <option class="grey">Выберите клиента</option>
            </select>
        </label>
    </form>
</div>

Как можно заметить в элементе находится обработчик событий

onchange='insertValue1(this,nonclient);'

Который передает сам себя в функцию через this. Вот сама функция которая выводит в консоль ID корневого элемента DIV:

function insertValue1 (giver, array){
    console.log(giver.parentElement.parentElement.parentElement.id);
}

И все в принципе работает как нужно, но у меня пара вопросов:

1) Как правильно назвать элемент div по отношению к элементу select чтобы не возникало вопросов? Родитель 3го порядка? Родитель родителя родителя?

2) Можно ли переход на 3 уровня вверх записать как-то более изящно, чем конструкцией:

giver.parentElement.parentElement.parentElement.id

Спасибо.

Answer 1

function insertValue1(giver, array) { 
  console.log(giver.value, giver.closest("div.blockGiver").id); 
}

<div id='blockGiver2' class="blockGiver"> 
  <form class='float_left'> 
    <label>Представляемое лицо:  
            <select id="subjectDropDown2" onChange='insertValue1(this, null);'>  
                <option class="grey">Выберите клиента</option> 
                <option value="1">One</option> 
                <option value="2">Two</option> 
                <option value="3">Three</option> 
                <option value="4">Four</option> 
            </select> 
        </label> 
  </form> 
</div>