Appending data- to a div using jQuery

Question

I have the following data types on my <li> data-author and data-body.

When the li is clicked I would like to append the data-author and the data-info to a couple of div classes for example classOne and classTwo.

What would be the best way to get the data- when clicked and pass the data to its required location?

Code:

$(document).ready(function() {

    var url = "assets/js/data.json",
        fetchJSON = $.getJSON(url);

    fetchJSON.done(function(response) {
        var buttons = response.map(function(i) {
            return $('<li>').html(i.title).attr({
                "data-author": i.author,
                "data-body": i.body
            })
        });
        $('ul').append(buttons);

    });

    $('ul').on('click', 'li', function(){


    });
}); //Ready function closed

Ionică Bizău · Accepted Answer · 2015-01-09 05:40:16Z

3

Just take the data-... attribute from the this element.

$('ul').on('click', 'li', function(){
    var $this = $(this);

    var author = $this.attr("data-author");
    var body = $this.attr("data-body");

    $('div.classOne').text(author);
    $('div.classTwo').text(body);
});

Note you can generate the list even with a shorter code:

var buttons = response.map(function(i) {
   return $('<li>', {
     text: i.title,
     "data-author": i.author,
     "data-body": i.body
   })
});

If you want to add the attributes, in DOM, do not use data() since that will store them in the dom element. Otherwise, you can use it, and the fields are accessible by $this.data("author") and $this.data("body").

var response = [
  { title: "Hello World!", author: "Someone", body: "Hi there!" },
  { title: "Hello Mars!", author: "Another One", body: "Greetings!" }
];

var buttons = response.map(function(i) {
   return $('<li>', {
     text: i.title,
     "data-author": i.author,
     "data-body": i.body
   })
 });

$("ul").html(buttons);
$('ul').on('click', 'li', function(){
  var $this = $(this);

  var author = $this.attr("data-author");
  var body = $this.attr("data-body");

  $('div.author').text(author);
  $('div.body').text(body);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul></ul>
<div class="author"></div>
<div class="body"></div>

edited Jan 9, 2015 at 5:40

answered Jan 9, 2015 at 5:29

Ionică Bizău

114k95 gold badges311 silver badges490 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jess McKenzie Over a year ago

I can not say thanks enough to the quality of your answer very much appreciated!

Rohan Kumar · Accepted Answer · 2015-01-09 05:31:10Z

1

Try this,

$('ul').on('click', 'li', function(){
    $('div.classOne').html($(this).data('author'));
    $('div.classTwo').html($(this).data('body'));
});

$('ul').on('click', 'li', function() {
  $('div.classOne').html($(this).data('author'));
  $('div.classTwo').html($(this).data('body'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
  <li data-author="Rohan" data-body="Lorem ipsum doner inut">List 1</li>
  <li data-author="Andrew" data-body="Oh, Again Lorem ipsum doner inut">List 2</li>
</ul>
<div class="classOne"></div>
<div class="classTwo"></div>

answered Jan 9, 2015 at 5:31

Rohan Kumar

40.7k11 gold badges81 silver badges111 bronze badges

Collectives™ on Stack Overflow

Appending data- to a div using jQuery

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related