代码之家 › 专栏 › 技术社区 › Reddy

jQuery onClick根据可用列表项(例如:图像src、标题文本等)创建div块的数量

jquery javascript

Reddy · 技术社区 · 5 年前

有动态列表项,其中有复选框,标签,文本,图像等。。。

根据项目数量( <li> ,我想用索引号创建输入字段( Item 1, Item 2, etc... )动态的。

目前,通过使用下面的代码,它在复选框和标签上可以正常工作。

let $checkboxContent = $('.checkboxes-content');

$(document).on('click', '#getCheckboxesContent', function() {
  let html = $('.checkboxes :checkbox').map((i, el) => `<div class="item">Item ${i + 1}: <input type="text" value="${el.nextElementSibling.textContent}" /></div>`).get();
  $checkboxContent.append(html);
});

幸亏 @罗里·麦克罗森 对于上述代码。

但我也想得到图片的url和 .text html。如何获取图像路径&每个列表项的文本。

运气不好就尝试了以下标签:(

${el.querySelectAll('li .text').textContent}
<img src="${el.querySelectAll('li img').attr('src')}" />

let $checkboxContent = $('.checkboxes-content');

$(document).on('click', '#getCheckboxesContent', function() {
 let html = $('.checkboxes :checkbox').map((i, el) => `
 <div class="item">
  <h3 class="text">${el.querySelectAll('li .text').textContent}</h3>
  Item ${i + 1}: <input type="text" value="${el.nextElementSibling.textContent}" />
    <img src="${el.querySelectAll('li img').attr('src')}" />
 </div>
 `).get();
 $checkboxContent.append(html);
});

body{font-family:verdana;font-size:14px;}
.checkboxes{padding:20px;}
ul{margin:0;padding:0;list-style:none;}
li{margin-top:10px;padding:5px;background:#efefef;}
label .lbl{margin-left:5px;}
.item{margin-top:10px;background:#efefef;padding:10px;}
h2{font-weight:bold;margin:0;padding:0;font-size:16px;}
.checkboxes-content{margin:15px;}
#getCheckboxesContent{margin-left:15px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="checkboxes">
    <h2>Heading</h2>
    <ul>
        <li>
            <h3 class="text">Hello World</h3>
            <label><input type="checkbox" class="checkbox-sm" name="checkbox"><span class="lbl">Checkbox 1</span></label>
            <img src="https://via.placeholder.com/100x20.png" alt="">
        </li>
        <li>
            <h3 class="text">Lorem ipsum</h3>
            <label><input type="checkbox" class="checkbox-sm" name="checkbox"><span class="lbl">Checkbox 2</span></label>
            <img src="https://via.placeholder.com/50x15.png" alt="">
        </li>
        <li>
            <h3 class="text">dolar sit amet</h3>
            <label><input type="checkbox" class="checkbox-sm" name="checkbox"><span class="lbl">Checkbox 3</span></label>
            <img src="https://via.placeholder.com/150x20.png" alt="">
        </li>
    </ul>
</div>
<a href="javascript:;" id="getCheckboxesContent">Get content</a>

<div class="checkboxes-content">
    
</div>

0 回复 | 直到 5 年前

Swati lk_ayyagari 5 年前

你可以用 .closest() 和 .find() 获取所需元素文本和src。

演示代码 :

let $checkboxContent = $('.checkboxes-content');

$(document).on('click', '#getCheckboxesContent', function() {
  let html = $('.checkboxes :checkbox').map((i, el) => `
 <div class="item">
  <h3 class="text">${$(el).closest("li").find('.text').text()}</h3>
  Item ${i + 1}: <input type="text" value="${$(el).closest("li").find('.lbl').text()}" />
    <img src="${$(el).closest("li").find('img').attr('src')}" />
 </div>
 `).get();
  $checkboxContent.append(html);
});

body {
  font-family: verdana;
  font-size: 14px;
}

.checkboxes {
  padding: 20px;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  margin-top: 10px;
  padding: 5px;
  background: #efefef;
}

label .lbl {
  margin-left: 5px;
}

.item {
  margin-top: 10px;
  background: #efefef;
  padding: 10px;
}

h2 {
  font-weight: bold;
  margin: 0;
  padding: 0;
  font-size: 16px;
}

.checkboxes-content {
  margin: 15px;
}

#getCheckboxesContent {
  margin-left: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="checkboxes">
  <h2>Heading</h2>
  <ul>
    <li>
      <h3 class="text">Hello World</h3>
      <label><input type="checkbox" class="checkbox-sm" name="checkbox"><span class="lbl">Checkbox 1</span></label>
      <img src="https://via.placeholder.com/100x20.png" alt="">
    </li>
    <li>
      <h3 class="text">Lorem ipsum</h3>
      <label><input type="checkbox" class="checkbox-sm" name="checkbox"><span class="lbl">Checkbox 2</span></label>
      <img src="https://via.placeholder.com/50x15.png" alt="">
    </li>
    <li>
      <h3 class="text">dolar sit amet</h3>
      <label><input type="checkbox" class="checkbox-sm" name="checkbox"><span class="lbl">Checkbox 3</span></label>
      <img src="https://via.placeholder.com/150x20.png" alt="">
    </li>
  </ul>
</div>
<a href="javascript:;" id="getCheckboxesContent">Get content</a>

<div class="checkboxes-content">

</div>