I've been trying to figure this out for the past few hours and can't get my head round it, so I have the following function:

$("SPEECH",currentContext).each(function(){
        var speaker = $("#selectSpeaker").val();
        if($(this).find("SPEAKER").text()===speaker){
            var line = $(this).find("LINE").text();

            $("#speakers").append("<p class='speech'>" + speaker + "</p>" + "<p>" + line + "</p>");
        } 
    });

and XML marked up like:

What I am doing is pulling in info such as LINE & SPEECH through XML, and it is working almost perfectly, its finding the selected SPEAKER, finding the LINE's associated with the speaker and outputting them. However I am finding that any LINE's that are in a row in the XML are being placed into 1 long paragraph rather than a new paragraph for each (like I want). By doing this, for the lines that are in a row, no space is placed between the end of one line and the beginning of the next, so the start and end word of lines are being joined together.

From my knowledge I can say this is down to not looking for each individual line, so my thought is that using .each() within the variable would solve this, however I cannot seem to get it to work.

Any help would be greatly appreciated!

Thanks in advance.

I've been trying to figure this out for the past few hours and can't get my head round it, so I have the following function:

$("SPEECH",currentContext).each(function(){
        var speaker = $("#selectSpeaker").val();
        if($(this).find("SPEAKER").text()===speaker){
            var line = $(this).find("LINE").text();

            $("#speakers").append("<p class='speech'>" + speaker + "</p>" + "<p>" + line + "</p>");
        } 
    });

and XML marked up like: http://pastebin./GhesMcay

What I am doing is pulling in info such as LINE & SPEECH through XML, and it is working almost perfectly, its finding the selected SPEAKER, finding the LINE's associated with the speaker and outputting them. However I am finding that any LINE's that are in a row in the XML are being placed into 1 long paragraph rather than a new paragraph for each (like I want). By doing this, for the lines that are in a row, no space is placed between the end of one line and the beginning of the next, so the start and end word of lines are being joined together.

From my knowledge I can say this is down to not looking for each individual line, so my thought is that using .each() within the variable would solve this, however I cannot seem to get it to work.

Any help would be greatly appreciated!

Thanks in advance.

• javascript
• jquery
• xml
• find
• each

Share Improve this question Follow asked May 2, 2012 at 3:37 MichaelMichael 81755 gold badges1414 silver badges2525 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

What you have mentioned is basically correct. If $(this).find("LINE") returns more than one item, then when you call text() the text will just get concatenated together. If you want to do something with each one individually, you can use each:

var lines = $(this).find("LINE");

lines.each(function(){
   var singleLine = $(this);

   // do something here
});

EDIT: Another option would be using map:

var lines = $(this).find("LINE").map(function(){
    return "<p>" + $(this).text() + "</p>";
}).get().join("");

$("#speakers").append("<p class='speech'>" + speaker + "</p>" + lines);

.find(...) can potentially return an array of items. You should map them:

$("SPEECH",currentContext).each(function(){
    var speaker = $("#selectSpeaker").val();
    if($(this).find("SPEAKER").text()===speaker){

        // treat this like an array, and return a new paragraph for each line:
        var lines = $.makeArray(
            $(this).find("LINE").map(function() { return "<p>" + $(this).text() + "</p>"; })
        );

        $("#speakers").append("<p class='speech'>" + speaker + "</p>" + lines.join(""));
    } 
});

EDIT: Forgot that .map() was the one with the return value...and then you have to call .makeArray. :( Unfortunately not as straightforward.