Question

我有以下js函数：

function makeArticleFeed(response) {
        $('#articles-feed').empty();
        if(response.length > 0) {
            for(var x = 0; x<response.length; x++) {
                //format date
                var posted = new Date((response[x].posted * 1000));
                //format extract line brakes
                var extract = response[x].extract.replace(/(\r\n|\n|\r)/gm,"<br>");
                //format categories
                var categories = response[x].cat_name.split(",");
                //make a variable to store the HTML
                var articleHTML = (
                    '<div class="article-box"><h1><a href="#">' + response[x].title+
                    '</a><h1><h3><a href="#">' + response[x].name +
                    '</a>&nbsp;|&nbsp;' + posted.toLocaleDateString() +
                    '</h3><ul class="article-categories">'
                    );
                for(y=0; y<categories.length;y++) {
                    articleHTML += '<li class="article-category">' + categories[y] + " " + '</li>';
                }// end categories append for loop
                articleHTML += '</ul><p>' + extract + '</p></div>';
                //append the HTML
                $('#articles-feed').append(articleHTML);
                //check if article is free, add class accordingly
                if($(".article-category:contains(free)")) {
                    $(this).parent().parent().addClass("free");
                } 

            } //end article feed for loop
            $(".article-box h1 a").click(function(e) {
                e.preventDefault();
                var title = "title="+ $(this).text();
                $.post(
                    "db_queries/articles.php",
                    title,
                    function(data) {
                        var response = JSON.parse(data);
                        // formats article body
                        var articleBody = response[0].body.trim();
                        articleBody = articleBody.replace(/(\r\n|\n|\r)/gm,"<br>");
                        // formats date
                        var posted = new Date((response[0].posted * 1000));
                        $("#articles-feed").empty();
                        $("#articles-feed").append(
                            '<div class="article-box"><h1>' +response[0].title+
                            '</h1><h3>' + posted.toLocaleDateString()+
                            '</h3><p>' + articleBody +
                            '</p><button>Back to articles</button></div>'
                        ); //end append
                        $("#articles-feed button").click(function(e) {
                            e.preventDefault();
                            window.location.assign('articles');
                        })
                    } //end response function
                ); //end POST request
            }) //end article title click function
        } //end if response not empty block
        else {
            $("#articles-feed").append('<h1>Sorry, no article found!</h1>');
        } //end article not found message
    } //end makeArticleFeed

主要输出此HTML：

<div class='article-box'>
   <h1></h1>
   <h3></h3>
   <ul class='article-categories'>
      <li class='article-category'>free</li>
      <li class='article-category'>basic</li>
   </ul>
   <p></p>
</div>
<div class='article-box'>
   <ul class='article-categories'>
      <li class='article-category'>members-only</li>
      <li class='article-category'>basic</li>
   </ul>
</div>

现在我使用jQuery来检查文章类别是否包含免费，并且想要在<div class='article-box'>中添加一个类以防万一。到目前为止，我想出了这个，但这只是将类添加到所有文章框中：

if($(".article-category:contains(free)")) {
    $('.article-box').addClass("free");
}

有没有办法只定位包含我正在寻找的文字的文章框？

Answer 1

您可以使用parents方法：

$(".article-category:contains(free)").each(function () {
    $(this).parents("div.article-box").addClass("free");
});

Answer 2

您正在使用全局选择器.article-box，并且不会以任何方式指出它应该查找包含“免费”文本的.article-category的父元素。

您还应该记住，您实际上是在创建一个集合，因为可能有多个元素包含“免费”文本。因此，您需要遍历每个元素，找到它closest .article-box并为其添加“免费”类。

$('.article-category:contains(free)').each(function() {
    $(this).closest('.article-box').addClass('free');
});

Answer 3

您可以使用嵌套过滤器。在这种情况下，它们是理想的

$filteredDivs=$('.article-box').filter(function(){  
    return $(this).find('.article-category').filter(function(){
      return ($(this).html()=='free');    
    }).length>0;
}).addClass('free');

Fiddle link

jQuery选择器，目标div $（this）嵌套在里面的几个级别

3 个答案: