web-dev-qa-db-fra.com

Comment trouver une largeur d'élément parent en JavaScript ou jQuery?

J'ai unHTMLcode comme celui-ci -

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

Je dois trouver la largeur de l'élément parent ayant ID typehead .

Donc, dans ce cas, je dois trouver la largeur de la div ayant la classe bs-example .

Je ne peux pas utiliserIDdans le div supérieur pour pouvoir avoir la largeur de l'élément par ID car Je veux un code réutilisable car il devrait être utilisé à de nombreux endroits dans la page .

Ce que j'ai fait c'est -

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

Mais ça ne fonctionne pas.

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

Vous pouvez utiliser

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

Notez qu'il lancera si vous l'appelez avec l'argument document.documentElement. Si vous voulez qu'il renvoie undefined au lieu de lancer, utilisez parentNode au lieu de 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

Vous pouvez utiliser clientWidth property:

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

Voici un exemple plus ordonné utilisant 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"));
});

Alertes "100"

1
Dhunt

Si vous voulez une fonction générique, vous pouvez passer l'élément à vérifier en tant que paramètre, puis jQuery closest et width.

Code:

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

Démo: http://jsfiddle.net/f07uanoh/

0
Irvin Dominin