Как найти ширину родительского элемента в JavaScript или jQuery?

У меня есть код HTML, например:

<div class="bs-example">
    <input type="text" id="typehead" style="width: 500px;" class="form-control" placeholder="accounts" />
    <input type="text" class="form-control" placeholder="accounts" />
</div>

Мне нужно найти ширину родительского элемента с идентификатором typehead.

Итак, в этом случае мне нужно найти ширину div, имеющую класс bs-example.

Я не могу использовать ID в верхнем div, чтобы иметь ширину элемента по идентификатору, потому что я хочу использовать повторно используемый код, потому что он должен использоваться во многих местах на странице.

Что я сделал -

function myFunction()
{
    var x = document.getElementById("myLI").parentNode.parentElement.width;
    document.getElementById("demo").innerHTML = x;
}

Но он не работает.

Ответы

Ответ 1

var x = $("#typehead").parent().width();

Ответ 2

Вы можете использовать

function parentWidth(elem) {
    return elem.parentElement.clientWidth;
}
parentWidth(document.getElementById('typehead'));

Обратите внимание, что он будет метаться, если вы вызовете его с аргументом document.documentElement. Если вы хотите вернуть undefined вместо метания, используйте parentNode вместо parentElement.

function parentWidth(elem) {
  return elem.parentElement.clientWidth;
}
alert(parentWidth(document.getElementById('typehead')) + 'px');

<div class="bs-example">
  <input type="text" id="typehead" style="width: 500px;" class="form-control" placeholder="accounts" />
  <br />
  <input type="text" class="form-control" placeholder="accounts" />
</div>

Ответ 3

Вы можете использовать clientWidth свойство:

function myFunction() {
    var x = document.getElementById("myLI").parentNode.parentElement.clientWidth;
    document.getElementById("demo").innerHTML = x;
}

Ответ 4

Вот пример с использованием JQuery: http://jsfiddle.net/srfqko8r/3/

<div style="width: 100px;">
    <div style="width: 50px;" id="child">
    </div>
</div>

function GetParentDivWidth(){
    return $("#child").parent("div").width();
}

$(function(){
   alert(GetParentDivWidth());
});

Предупреждения "100"

Ответ 5

Если вы хотите использовать общую функцию, которую вы можете использовать, пропустите элемент для проверки как параметра и используйте jQuery closest и width.

код:

function myFunction($el) {
    return $el.closest('div.bs-example').width();
}

Демо: http://jsfiddle.net/f07uanoh/