0

Web ページを通過し、クラス名のすべてのタグを検索し、"option"以下に示す各 if ステートメントのテキストに一致するタグを非表示にする JavaScript 関数を作成しようとしています。

以下の例では、jquery を使用してクラスを取得しようとしましたが、その名前のすべてのクラスではなく、その名前の最初のクラスしか取得しません。

また、それが機能するかどうかを確認するために使用しようとしvar element = document.getElementsByClassName('option');ましたが、要素のリストを反復処理して表示を none に変更すると、変更が表示されませんでした。

クラスのリストを繰り返し処理し、一部の要素のみの css を更新するより良い方法は何ですか?

どんな助けでも大歓迎です。ありがとう。

$(document).ready(function(){

if($('.option').html() == "C. "){
    $('.option').css('display','none');
}
if($('.option').html() == "D. "){
    $('.option').css('display','none');
}
if($('.option').html() == "E. "){
    $('.option').css('display','none');
}
if($('.option').html() == "F. "){
    $('.option').css('display','none');
}
});
4

6 に答える 6

1

$('.option')要素を 1 つだけ取得するのではなく、呼び出しによって返される jQuery オブジェクトの「最初の」要素を操作するだけです。jQuery 呼び出しによって返されるすべての要素を反復処理するために必要なのは、jQuery の.each()関数です。また、長い if ステートメントは短くすることができますが、それを知っていて、他の目的があると思います。いずれにせよ、.each が呼び出されると、コールバック関数を使用して、渡される EACH 要素を操作できます。これは for ループによく似ています。次の例のパラメーターiは、オブジェクトが繰り返されるときの要素のインデックス値を表します。これは 0 ベースです。つまり、通過する 3 番目のオプション要素は、paramiを次のように設定します。2

これを試してみてください && 頑張ってください:

$(function() {
    $(".option").each(function(i) {
        var txt = $(this).text();
        if (txt == "C." || txt == "D." || txt == "E." || txt == "F.")
            $(this).hide();
    });
})

調査する代替リンク

  • .html()
    • このメソッドを使用してinnerHtml、要素の を取得または設定します
  • .val()
    • このメソッドを使用して、要素の値を取得または設定します
      • 主に HTML タグselect、input、 &&textarea
于 2012-11-19T21:50:50.260 に答える
1

$('.option').html()innerHTML最初の要素ののみを取得します。それらすべてを見たい場合は、 を使用する必要があります$.each。

$('.option').each(function(){
    if($.inArray($(this).html(), ['C', 'D', 'E', 'F']) !== -1){
        $(this).hide();
    }
});
于 2012-11-19T21:51:13.993 に答える
1

あなたが何を望んでいるのか理解できれば、これはうまくいくはずです：

$(document).ready(function(){
    $('.option').each( function(i,e) {
        var current = $(e).html();
        if (current == "C" || current == "D" || 
            current == "E" || current == "F") {
           $(e).hide();
        }
});
于 2012-11-19T21:48:50.577 に答える
1

.each 関数を使用する

$('.option').each(function(index) {
    if($(this).html == "E")
       $(this).hide();
});
于 2012-11-19T21:49:28.367 に答える
1

jQueryを使っているようですね。この $('.option') のような jQuery 関数でいくつかのクラスをラップすると、要素セットが得られます。つまり、多くの機能を提供する特別な jQuery クラスにラップされたすべての要素が含まれます。

要素セット全体を反復処理する最善の方法は、jquery .each() 関数を使用することです。http://api.jquery.com/jQuery.each/ は、すべて の要素にコールバック関数を適用します。このようなもの：

$(document).ready(function(){
    $('.option').each(function() {
        //Here you can access coresponding element to each iteration with this kyeword
        // you can wrap it again like this $(this) and get all of jQuery functionality on that object again
        $(this).hide();
    });
}
于 2012-11-19T21:58:04.577 に答える
0

これを試して：

$(document).ready(function(){
  $('.option:contains("C.")').hide();
  $('.option:contains("D.")').hide();
  $('.option:contains("E.")').hide();
  $('.option:contains("F.")').hide();
});

JQuery セレクターは、テキスト「C.」を含むクラス'.option:contains("C.")'のすべてのタグを検出し、関数はそのコレクション内の各要素を非表示にします。option.hide()

http://jsfiddle.net/b3hVw/

または、1 つのステートメントで次のようにします。

$(document).ready(function(){
    $('.option').filter(function() {
        var html = $(this).html();
        return html === "C." || html === "D." || html === "E." || html === "F.";
    }).hide();
});

$('.option')クラスを持つすべての要素を検索しますoption。呼び出しは.filter(function() { ... })、フィルター関数が true を返すものだけを一覧表示し、呼び出しにより.hide()それらの要素を非表示にします。

http://jsfiddle.net/H7Lu8/

于 2012-11-19T21:47:38.033 に答える