如何遍历div？答案

【问题标题】：How to iterate over div?如何遍历div？
【发布时间】：2014-01-07 21:54:11
【问题描述】：

我有以下场景：

<div class="maindiv">
     <div class="msg">some text</div>
                  ...
     <div class="msg">some other text</div>
</div>

我想获取每个“msg”类 div 的文本并使用 Google API 进行翻译。

我做了以下JS函数：

function translateTimeline(){

var lang = $('#timelineLenguage').val();
var translation;
    $(".msg").each(
    function(i){
                 translation=google.language.translate($(this).text(), "", lang,
                 function(result) {
                    if (!result.error) {

                       $(this).text(result.translation);
                    }else{
                       alert('Cannot translate tweet. Try again later');
                    }
                 });

    });
return false;
};

这不起作用..

这就是我有限的 JS/jQuery 技能所能做到的一切......

提前感谢您的帮助和时间:)

【问题讨论】：

怎么不工作了？没有效果吗？翻译错了吗？您是否在 else 块中收到错误消息？

标签： javascript jquery html

【解决方案1】：

我从来没有玩过google.language APIs，这是一个有趣的练习。基本上，它是将.msg 项目翻译成另一种语言的工具。如果 API 发生变化，我不确定这会有多脆弱，但它似乎工作得很好。请注意，这不会保留原始文本，因此如果您进行多次翻译，翻译质量会“下降”。看看我是如何执行translateWithGoogle() 函数的，我认为这会通知您自己的代码。我尽可能精简它。

<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">

google.load("jquery", "1.3.2");
google.load("language", "1");

function translateWithGoogle(context, fromLang, toLang) {
    google.language.translate($(context).text(), fromLang, toLang,
      function(result) {
        if (!result.error) {
            $(context).text(result.translation);
        }
    });
}
function translateTimeline() {
    var fromLang = $('#currentLang').text();
    var toLang = $('#targetLang').val()
    $('.msg').each(function() {
        translateWithGoogle(this, fromLang, toLang);
    });
    $('#currentLang').text(toLang);
}

$(document).ready(function(){
    $('#targetLang').bind('change', function(){
        translateTimeline();
    });
});
</script>
</head>
<body>
<div class="maindiv">
    <div class="msg">some text</div>
    <div class="msg">some other text</div>
    <div class="msg">hello world</div>
    <div class="msg">my stack has overflowed!</div>
</div>
<hr />
<span id="currentLang">en</span>
<select id="targetLang">
    <option value="af">Afrikaans</option>
    <option value="sq">Albanian</option>
    <option value="ar">Arabic</option>
    <option value="be">Belarusian</option>
    <option value="bg">Bulgarian</option>
    <option value="ca">Catalan</option>
    <option value="zh-CN">Chinese</option>
    <option value="hr">Croatian</option>
    <option value="cs">Czech</option>
    <option value="da">Danish</option>
    <option value="nl">Dutch</option>
    <option value="en">English</option>
    <option value="et">Estonian</option>
    <option value="tl">Filipino</option>
    <option value="fi">Finnish</option>
    <option value="fr">French</option>
    <option value="gl">Galician</option>
    <option value="de">German</option>
    <option value="el">Greek</option>
    <option value="iw">Hebrew</option>
    <option value="hi">Hindi</option>
    <option value="hu">Hungarian</option>
    <option value="is">Icelandic</option>
    <option value="id">Indonesian</option>
    <option value="ga">Irish</option>
    <option value="it">Italian</option>
    <option value="ja">Japanese</option>
    <option value="ko">Korean</option>
    <option value="lv">Latvian</option>
    <option value="lt">Lithuanian</option>
    <option value="mk">Macedonian</option>
    <option value="ms">Malay</option>
    <option value="mt">Maltese</option>
    <option value="no">Norwegian</option>
    <option value="fa">Persian</option>
    <option value="pl">Polish</option>
    <option value="pt">Portuguese</option>
    <option value="ro">Romanian</option>
    <option value="ru">Russian</option>
    <option value="sr">Serbian</option>
    <option value="sk">Slovak</option>
    <option value="sl">Slovenian</option>
    <option value="es">Spanish</option>
    <option value="sw">Swahili</option>
    <option value="sv">Swedish</option>
    <option value="th">Thai</option>
    <option value="tr">Turkish</option>
    <option value="uk">Ukrainian</option>
    <option value="vi">Vietnamese</option>
    <option value="cy">Welsh</option>
    <option value="yi">Yiddish</option>
</select>

</body>
</html>

【讨论】：

就像我说的，这是一个很棒的练习——我很乐意提供帮助！

【解决方案2】：

myabe 试试

$(this).html()

而不是

$(this).text()

【讨论】：

text() 是这里的合适方法。谷歌翻译器对任何 html 标记都不感兴趣。
已经试过了，同样的问题 :( 感谢您的输入 :)

【解决方案3】：

这可能是因为您在该行中的语言拼写错误：

lang = $('#timelineLenguage').val();

如果不是这样，您需要提供有关正在发生的事情的更多详细信息。

【讨论】：

感谢您的回答。是的，那里有一个错字，但不是这样:(

【解决方案4】：

您确定下一行中的“this”指向正确的对象吗？不是指向窗口吗？

$(this).text(result.translation);

试试这个：

function translateTimeline(){

    var lang = $('#timelineLenguage').val();
    var translation;
    $(".msg").each(
    function(i){
        var me = this; /*CHANGED*/
        translation=google.language.translate($(this).text(), "", lang,
            function(result) {
                if (!result.error) {
                    $(me).text(result.translation); /*CHANGED*/
                }else{
                    alert('Cannot translate tweet. Try again later');
                }
            }
        );
    });
    return false;
};

【讨论】：