wake-up-neo.net

Wie finde ich eine übergeordnete Elementbreite in JavaScript oder jQuery?

Ich habe einenHTMLCode wie folgt -

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

Ich muss die Breite des übergeordneten Elements mit der ID typehead ermitteln.

In diesem Fall muss ich also die Breite des divs mit der Klasse bs-example finden.

Ich kannIDnicht im oberen div verwenden, damit ich die Breite des Elements nach ID haben kann, weil ich einen wiederverwendbaren Code haben möchte, da er an vielen Stellen auf der Seite verwendet werden sollte .

Was ich getan habe ist

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

Aber es funktioniert nicht.

13
Abrar Jahin
var x = $("#typehead").parent().width();
12

Sie können verwenden

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

Beachten Sie, dass es ausgelöst wird, wenn Sie es mit dem Argument document.documentElement aufrufen. Wenn Sie möchten, dass undefined anstelle von werfen zurückgegeben wird, verwenden Sie parentNode anstelle von 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>

19
Oriol

Sie können clientWidth property verwenden:

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

Hier ist ein aufgeräumteres Beispiel mit JQuery: http://jsfiddle.net/srfqko8r/3/

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

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

$(function(){
   alert(GetParentDivWidth("#child"));
});

Warnungen "100"

1
Dhunt

Wenn Sie eine generische Funktion wünschen, können Sie das Element als Parameter übergeben und jQuery closest und width verwenden.

Code:

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

Demo: http://jsfiddle.net/f07uanoh/

0
Irvin Dominin