Question

我正在尝试从strong中所有div id='content'标签中收集内容，并用它们填充[ul id='loop']

之前：

 <div id='content'>
     this <strong>is</strong> a <strong>long</strong> content
 </div>

 <ul id='loop'>

 </ul>

之后：

<div id='content'>
    this <strong>is</strong> a <strong>long</strong> content
</div>

<ul id='loop'>
   <li>is</li>
   <li>long</li>
</ul>

Answer 1

您可以遍历所有强元素并将其文本添加到ul，请参见以下代码

$(function(){
   $('#content strong').each(function(){ // get all strong from content
     $('#loop').append('<li>' + $(this).text() + '</li>'); // create li with text
   });
   
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='content'>this <strong>is</strong> a <strong>long</strong> content</div>

    <ul id='loop'>

    </ul>

Answer 2

您不需要jquery来执行此操作-只需使用js。使用querySelectorAll获取元素。然后遍历该列表为#loop列表创建li。

var strongElements = document.querySelectorAll('#content strong');

var loopStr = '';

strongElements.forEach(function(element) {
  loopStr += '<li>' + element.innerText + '</li>';
})

document.querySelector('#loop').innerHTML = loopStr

<div id='content'>this <strong>is</strong> a <strong>long</strong> content</div>

<ul id='loop'></ul>

Answer 3

您可以将map元素从strong到li元素，然后appendTo ul元素。

$('#content strong').map(function () {
    return $('<li>').text($(this).text()).get();
}).appendTo('#loop');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='content'>this <strong>is</strong> a <strong>long</strong> content</div>
<ul id='loop'>
</ul>

如果必须立即执行，请确保将代码放在body标记的末尾，否则将其包装在$(function () { .... })

中

从<strong>标签获取内容

3 个答案: