0

我有很多 div.articles 和那些文章；我有标签列表。我正在尝试隐藏没有 href = '#myFilter' 的文章 div。

我到达 href 没有问题，我的问题是到达它的 parent() 而不创建 jQuery 冲突。

这是要检查的 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 filter 方法，这确实是您的问题所需要的。

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 回答