0

私はたくさんの div.articles とその記事を持っています。私はタグのリストを持っています。href = '#myFilter' を取得していない記事の div を非表示にしようとしています。

href に到達しても問題はありません。私の問題は、jQuery conflict を作成せずに parent() に到達することです。

検査する jsFiddle の例を次に示します。

jQuery

//trying to hide which don't got a href '#/news'
var news = '#/news';
$('.article a').each(function() {
    var category = $(this).attr('href');

    if ( category === news ) {//select only articles got #/news href in it
      //$(this).parent().parent().parent().show();//trying to reach article
        $(this).show();
    }else{
      //$(this).parent().parent().parent().hide();//this way hides all articles
        $(this).hide();//this works only on a elements
    }
});​

html:

<div class="article">
    <img src="http://content.photojo.com/content1.jpg" width="50" height="50" />
    <ul>
        <li><a href="#/news">News</a></li>
        <li><a href="#/nature">Nature</a></li>
        <li><a href="#/sport">Sport</a></li>
        <li><a href="#/hobbies">Hobbies</a></li>
    </ul>
</div>
<div class="article">
    <img src="https://encrypt.google.com/content2.jpg" width="50" height="50" />
    <ul>
        <li><a href="#/nature">Nature</a></li>
        <li><a href="#/economy">Economy</a></li>
        <li><a href="#/world">World</a></li>
        <li><a href="#/hobbies">Hobbies</a></li>
    </ul>
</div>
4

3 に答える 3

1

更新: 新しいデモ: http://jsfiddle.net/9GErB/ これにより、以前に表示されていたフラッシュがなくなり、変数を使用するようにセレクターを変更する方法も示されます。あなたの質問が本当に必要とするjQueryフィルターメソッドに依存しています。

var news = '#/news';
var nature = '#/nature';
var sport = '#/sport';
var hobbies = '#/hobbies';
var economy = '#/economy';
var world = '#/world';

$('.article').filter(function() {
    return $(this).find('a[href="'+news+'"]').length==0;
}).hide();

これにより、記事のセットがフィルター式に一致する記事に絞り込まれ、非表示になります。これは、記事を繰り返し処理してから、各記事内のリンクを繰り返し処理するよりもはるかに効率的です。

更新: 作業デモhttp://jsfiddle.net/WfdXE/

jQuery の.closest()メソッドを使用して、特定のセレクターに一致する dom ツリー内の最も近い祖先を取得します。

$('.article').hide();
$('.article').find('a[href="#/news"]').each(function() {
    $(this).closest('.article').show();
});

jQuery属性セレクターは[name="value"].

ここで文字列変数を使用するには、次のようにします。

var sel = "myFilter"; 
.find('a[href="'+sel+'"]') // this simply includes the text value of sel as the value

JS では+、文字列の連結に使用します。

于 2012-07-07T15:29:26.973 に答える
1

記事ごとにクロージャーを使用して、現在のアイテムを非表示にする必要があるかどうかを追跡します。これには、nbrooks の回答のちらつきはありません。

このフィドルが示すように: http://jsfiddle.net/878zQ/14/

var news = '#/news';
var nature = '#/nature';
var sport = '#/sport';
var hobbies = '#/hobbies';
var economy = '#/economy';
var world = '#/world';


$('.article').each(function() {

    var hide = 1;

    $(this).find('a').each(function() {

        var category = $(this).attr('href');

        if (category == news) { 
            hide = 0;
        }
    });


    if (hide == 1) $(this).hide();

});

これが何をするかを説明するために、機能の英語の説明を次に示します。

For each page element containing a class of article.

    Set the hide flag to true

    For each a element in this page element

        Look at the href attribute and see if it matches the variable news
        If it does set the hide variable to false.

    If the hide flag is true hide this element.
于 2012-07-07T15:58:14.697 に答える
0

これを試して、

ライブデモ

$('.article').each(function() {
    $(this).find('a').each(function(){        
  if ( $(this).attr('href') === news ) {
    $(this).closest('.article').show();    
    return false;
  }else
      $(this).closest('.article').hide();            
  });
});​
于 2012-07-07T15:25:35.113 に答える