jquery replace text in nested list

Question

<ul class="playlist">
    <li class="track_name">$name1
        <ul>
            <li class="play"><a class="play_link" href="$url">play</a></li>
            <li class="download"><a href="download.php?id=$url">download</a></li>
        </ul>
    </li>
    <li> ... more tracks here
</ul>
<ul class="playlist">
... more playlists here

Given a dynamically generated unordered nested lists, what is the easiest way to replace text 'play' in <li class="play"> with $name1?

I've done the following:

var val = $('.play').closest('.track_name').clone().children().remove().end().text();
$('.play_link').text(val);

This gives me all track_names, but can't figure out how to get just the relevant track name.

TIA!

iMoses · Accepted Answer · 2012-11-10 02:41:41Z

2

You can pass a function into .text(), which will allow you to set the text of all of the .play elements:

$('.play a').text(function(i, v) {
    return $(this).closest('.track_name').clone().children().remove().end().text();
});

Code Example

edited Nov 10, 2012 at 2:41

iMoses

4,3471 gold badge26 silver badges40 bronze badges

answered Nov 10, 2012 at 2:37

Blender

300k55 gold badges462 silver badges511 bronze badges

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

2 Comments

iMoses Over a year ago

I think it should be $('.play a')

Ragamffn Over a year ago

Works great! Would it somehow be possible to hide that parent <li class="track_name">$name1 without disrupting the function?

SpYk3HH · Accepted Answer · 2012-11-10 03:01:08Z

0

Simply set the selected one to have a selected class on click and then use that class to get the selected one: (or do whatever else)

Something like:

<li class="track_name">
    <span class="text">$name1</span>
    <ul>
        <li class="play"><a class="play_link" href="$url">play</a></li>
        <li class="download"><a href="download.php?id=$url">download</a></li>
    </ul>
</li>

$(".track_name").on("click", function(e) {
    $(".selected").removeClass("selected");
    $(this).addClass("selected")
        .find('.play_link').text($(".selected .text").text());
});

edited Nov 10, 2012 at 3:01

answered Nov 10, 2012 at 2:56

SpYk3HH

22.6k11 gold badges73 silver badges81 bronze badges

Collectives™ on Stack Overflow

jquery replace text in nested list

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related