0

以下のようなhtmlファイルがあります。

<div id="ultreecurri" style="float:left;">
<ul>

<li id="li1" class="popupul" style="text-align: left;">International</li>
<li id="li10" class="popupul" style="text-align: left;">Science</li>
<li id="li332" class="popupul" style="text-align: left;">Physics</li>
<li id="li2" class="popupul" style="text-align: left;">Africa</li>
<li id="li3" class="popupul" style="text-align: left;">Asia</li>
<li id="li5" class="popupul" style="text-align: left;">Caribbean</li>
<li id="li8" class="popupul" style="text-align: left;">North America</li>
<li id="li9" class="popupul" style="text-align: left;">South America</li>
<li id="li1" class="popupul" style="text-align: left;">International</li>
<li id="li10" class="popupul" style="text-align: left;"> Science</li>
<li id="li332" class="popupul" style="text-align: left;">Physics</li>
<li id="li2" class="popupul" style="text-align: left;">Africa</li>
<li id="li3" class="popupul" style="text-align: left;">Asia</li>
<li id="li5" class="popupul" style="text-align: left;">Caribbean</li>
<li id="li8" class="popupul" style="text-align: left;">North America</li>
<li id="li9" class="popupul" style="text-align: left;">South America</li>
 </ul>
</div>

liid に従って、li アイテムの一意のテキストを取得するにはどうすればよいですか。

4

3 に答える 3

2 
var items = [],
    txt;
$( '#ultreecurri li' ).each( function() {
    // Cache the text to avoid retrieving twice the same property
    txt = $( this ).text();

    // If the text isn't in the array, add it
    if ( $.inArray( txt, items ) === -1 ) {
        items.push( txt );
    }
} );
console.log( items );​ // Array of unique values

デモ： http： //jsfiddle.net/Ralt/Vz7ev/1/

「科学」は「科学」と同じではないことがわかります。$.trim気になる場合は、（先頭と末尾のスペースを削除する）を使用することをお勧めします。以下を変更するだけです。

// Replace this:
txt = $( this ).text();
// With this:
txt = $.trim( $( this ).text() );
于 2012-06-04T07:53:19.790 に答える
1

複数の要素に同じIDを指定することは許可されていないため、マークアップは無効です。

そうは言っても、あなたの質問がli要素のコンテンツから一意の値のリストを取得する方法である場合：

var workingObj = {},
    uniqueVals = [];

$("#ultreecurri li").each(function() {
   var val = $(this).html();
   if (!(val in workingObj)){
      workingObj[val] = true;
      uniqueVals.push(val);
   }
});

// uniqueVals array now contains one of each unique value.

余談ですが、同じインラインスタイル（text-align: left;）を設定すると、マークアップが醜くなり、継続的なメンテナンスが必要以上に面倒になります。popupulそれらを削除して、既存のクラスに追加します。または、何らかの理由でそのクラスを変更できない場合は、これをスタイルシートに追加します。

#ultreecurri li { text-align: left; }
于 2012-06-04T07:56:57.690 に答える
0

マークアップに重複が多すぎるIDため、有効なマークアップではありません。代わりに、重複した要素を削除して、配列に一意の要素を持たせることをお勧めします。

この目的のためのスニペットを次に示します。

var list = {};
$('li').each(function() {
    var id = $(this).attr('id');
    if (list[id])
        $(this).remove();
    else
        list[id] = $(this);
});
于 2012-06-04T08:07:17.957 に答える