如何使用jquery从html提取元素？

Question

I have a popover that lists various playlists a user has. On click, I am trying to get the video_id associated with the video to be added to the appropriate playlist. I'm not sure how to implement this; the user clicks on the link in the popover, the video_id (from the div #add) and the playlist selected (there are multiple playlists that the user generates names for but only one is selected) is supposed to be extracted. Any advice?

    <script type="text/javascript">
   $(document).ready(function() {
       $("#muncher").click(function(event){
       event.preventDefault();
            $.ajax({
                 type:"POST",
                 url:"/edit_favorites/",
                 data: {
                        'video_add': $('#add').val(), // from form
                        'playlist_selected': $('#').val() //from form
                        },
                 success: function(){

                        $('#muncher').html("Added");


                    }
            });
            return false;
       });

    });
</script>   


<div id = 'muncher'>
    <div id = 'add'>12345</div>
    <a href = "#" id="munch" rel="popover" data-html="true" data-placement="right"  data-content= "<a href= '#'>Favorites</a><br>

                <a href = '#' class = 'Funny'>Funny</a><br>

                <a href = '#' class = 'test'>test</a><br>

                <a href = '#' class = 'test1'>test1</a><br>                     

    " data-original-title="Add to your plate">
            Munch
    </a>    
</div>

Answer 1

You can try using jquery data attribute to store the ID within the A tag.

or instead you can try to get the previous sibling which is the DIV tag above the A tag that was clicked then use .text() to get its value

Also you should not have multiple elements with the same ID? It sounds like you have lots of items with ID="ADD" ?

In this case you may need to chage your code from

 $('#add').val(), 

to

 $('#add', $(this)).text(), 

Answer 2

In an HTML document, .html() can be used to get the contents of any element, http://api.jquery.com/html/ so give this a try:

$('#add').html()

Daveo is correct, you would need to make the id of your divs unique, one option to do that is to use the playlist id along with add. like id="add_12345"

Then, instead of a .click jQuery method, use an onclick inline in each of your add_[id variable] divs:

<div id="add_12345" onclick="addClick(this);">

The javascript function to get the id:

function addClick(element) {
    id = element.id.slice(element.id.indexOf("_") + 1);
    alert(id);
    //your ajax post code here
}

There are several ways to handle what you are trying to achieve, check out this very good stackoverflow Q&A for more on this topic: Getting the ID of the element that fired an event

You should change your markup, 12.2.2 Nested links are illegal

Answer 3

Little confused about what exactly sure what you're trying to do. Is each video a child of playlist? If so, try passing this.id as a parameter in the onClick event...

...click="toPlaylist(this.id)"

function toPlaylist(clicked) {
  var tempVideo = clicked;
  // Get a parent node ID like this...
  var tempList = $(clicked).parentNode.id;
  // Do something else...
  nextAction(tempVideo, tempList);
}

PS: You may have to do something like this

  var tempVideo = '#'+clicked;    

...for the variables, I'm not sure sure.

Hope this was helpful.