javascript附加div并将其宽度设置为与锚文本相同答案

【问题标题】：javascript append div and set its width same as an anchor textjavascript附加div并将其宽度设置为与锚文本相同
【发布时间】：2018-08-28 20:56:34
【问题描述】：

我正在尝试以编程方式创建一个 div，将其附加到父 div，并将这个新创建的 div 的宽度设置为等于 <a>...</a> 内的文本宽度，这是同一父 div（其兄弟）的子级。

html:

<div id='div0'>
 <a href="#">text</a>
</div>

js/jquery:

        var curDiv = document.getElementById('div0');
        var iDiv = document.createElement('div');
        iDiv.id = 'newDivId';
        iDiv.className = 'newDivClass';
        curDiv.appendChild(iDiv);

        // the div is appended successfuly
        // next step below doesn't work

        var curTxt = $('#div0').next("a").text();
        var curWidth = curTxt.width();

        $('.newDivClass').css('width', curWidth);

我使用 .log 得到的是变量 curTxt = (empty)，它还返回此错误：curTxt.width is not a function。

【问题讨论】：

阅读 jQuery .next() 文档：api.jquery.com/next - Next 获取下一个兄弟姐妹，而不是孩子。尝试使用.find()
嗯，使用inline-block而不是block？
您可以使用$('#div0 > a') 选择器来访问您的a 元素。

标签： javascript jquery append width

【解决方案1】：

这个不需要 JS。只需将您的 div 设置为display : inline-block。

#div0 {
   border: green solid 3px;
   display : inline-block;
}

a {
   border : blue solid 3px;
   font-size : 2rem;
}

<div id='div0'>
 <a href="#">text</a>
</div>

【讨论】：

我有其他 div 的 id 低于 div0，如果我将它们设置为 inline-block，它们会在一行中移动，因此它们现在被设置为“块”，因为我需要它们彼此重叠，我不能使用任何额外的 div 或表格单元格等，知道吗？谢谢
好吧，现在这是一个不同的问题。我回答了如何拥有一个自动宽度的 div，现在如果你想要每行一个而不更改标记，那就是另一回事了。

【解决方案2】：

你可以这样做

var curDiv = document.getElementById('div0');
var iDiv = document.createElement('div');
iDiv.id = 'newDivId';
iDiv.className = 'newDivClass';
iDiv.style.background = "red"
iDiv.style.height = "10px"
curDiv.appendChild(iDiv);

// the div is appended successfuly
// next step below doesn't work

var curWidth = $('#div0 > a').width();

console.log(curWidth)


$('.newDivClass').css('width', curWidth);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='div0'>
 <a href="#">text</a>
</div>

您的主要问题是 next() 似乎在链接是孩子时搜索兄弟姐妹

【讨论】：