jQuery onClick create number of div blocks based on available list items (Eg: Image src, heading text etc...)

user_3110145 0
Viewed 30

Having the dynamic list items which has checkbox, label, text, image etc...

Based on number of items (<li>'s), I want to create input fields with index numbers (Item 1, Item 2, etc...) dynamically.

jsFiddle

Currently it is working as expected for Checkboxes and lablels by using below code.

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);
});

Thanks to @Rory McCrossan for the above code.

But I also want to get the Image url and .text html. How can I get the Image path & text for each list item.

Tried below tags without luck :(

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

enter image description here

jquery javascript
1 Answers

You can use .closest() and .find() to get required elements texts and src.

Demo Code :

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>

user_106064000
Related