CODEWITHSUNDEEP
jqueryhtml
Naveen Sadasivan S
Naveen Sadasivan S

Reputation: 263

List out data-attr in <li> using jquery

I've various div having data-attr. I want to list out all data-attr value in li using jQuery. Please help me. Below is my html and my expectation is noted below its.

<div data-attr="one">Contents goes here</div>
<div data-attr="two">--</div>
<div data-attr="three">----</div>

My Expectation

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

Upvotes: 0

Views: 2418

Answers (6)

e11438
e11438

Reputation: 894

Here is what you need to do,

  1. Select div elements with data-attr attribute using JQuery filters.

    var elements=$("div[data-attr]");

  2. Go through each element (Using JQuery each() method) and get the value of data-attr attribute (Using JQuery attr() method) and append it to <ul> element Using JQuery append() method

Here is the complete JavaScript code

$( document ).ready(function() {
   var elements=$("div[data-attr]");  

   elements.each(function () {
         $('ul').append('<li>'+$(this).attr('data-attr')+'</li>');  
   });
});

Upvotes: 0

dreamweiver
dreamweiver

Reputation: 6002

you need to loop through every div using jquery's .each() and create a li item with the data-attr value and append it to newly created unordered list.

JS CODE:

 var list = $('<ul></ul>');
 $('.parent div').each(function() {
   $('<li></li>').text($(this).data('attr')).appendTo(list);
 });
 $('.parent').append(list);

Live Demo @ JSFiddle

Upvotes: 1

Pranav C Balan
Pranav C Balan

Reputation: 115222

Iterate over elements which have data-attr and generate li using it's attribute value as text

// generate ul element
$('<ul>', {
  // set html content by iterating over content div
  html: $('[data-attr]').map(function() {
      // generating `li` with div content as text
      return $('<li>', {
         text: $(this).data('attr')
      })
    // getting array of li
    }).get()
// appending beginning of the body
}).prependTo('body')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div data-attr="one">Contents goes here</div>
<div data-attr="two">--</div>
<div data-attr="three">----</div>

FYI : If you want to remove the div then use $('[data-attr]').remove()

Upvotes: 2

channasmcs
channasmcs

Reputation: 1156

<div data-attr="one">Contents goes here</div>
<div data-attr="two">--</div>
<div data-attr="three">----</div>
<ul></ul>

$( document ).ready(function() {
   $("div[data-attr]").each(function () {
   $('ul').append('<li>'+$(this).data('attr')+'</li>');
  });
});

you can use JQ append

Upvotes: 1

mmativ
mmativ

Reputation: 1414

you can do like this,

$('div').each(function(){
	var data = $(this).data('attr');
  $('ul').append('<li>'+data+'</li>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div data-attr="one">Contents goes here</div>
<div data-attr="two">--</div>
<div data-attr="three">----</div>
<ul>
</ul>

Upvotes: 2

Ibrahim Khan
Ibrahim Khan

Reputation: 20740

Iterate through all div[data-attr] using each() and append data-attr of each div in ul. 

$("div[data-attr]").each(function () {
    $('ul').append('<li>'+$(this).data('attr')+'</li>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div data-attr="one">----</div>
<div data-attr="two">----</div>
<div data-attr="three">----</div>

<ul></ul>

Upvotes: 3

Related Questions