Question

我有很多div.articles和那篇文章;我有标签列表。我正在尝试隐藏文章div，但没有得到href ='＃myFilter'。

我到达href没有问题，我的问题是在没有创建jQuery冲突的情况下达到它的parent（）。

Here is jsFiddle example to inspect.

的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>

Answer 1

更新：新演示：http://jsfiddle.net/9GErB/ 这消除了您之前看到的闪存，并演示了如何更改选择器以使用变量。依赖于jQuery filter method，这正是您的问题所需要的。

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 attribute selector为[name="value"]。

要在此处使用字符串变量，您可以执行以下操作：

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

在JS中，您使用+进行字符串连接。

Answer 2

对于每篇文章，使用闭包来跟踪是否应隐藏当前项目。这不会让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.

Answer 3

试试这个，

<强> Live Demo

$('.article').each(function() {
    $(this).find('a').each(function(){        
  if ( $(this).attr('href') === news ) {
    $(this).closest('.article').show();    
    return false;
  }else
      $(this).closest('.article').hide();            
  });
});

如何在每个attr href中过滤文章并查找用法？简单的标签列表

3 个答案: