html - jQuery selectors, targeting the div $(this) is nested a couple of levels inside -
i have following js function:
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 variable store html var articlehtml = ( '<div class="article-box"><h1><a href="#">' + response[x].title+ '</a><h1><h3><a href="#">' + response[x].name + '</a> | ' + 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 loop articlehtml += '</ul><p>' + extract + '</p></div>'; //append html $('#articles-feed').append(articlehtml); //check if article free, add class accordingly if($(".article-category:contains(free)")) { $(this).parent().parent().addclass("free"); } } //end article feed 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 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 that outputs 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> now i'm using jquery, check if article-category contains free, , want add class <div class='article-box'> in case does. far came this, adds class article boxes:
if($(".article-category:contains(free)")) { $('.article-box').addclass("free"); } is there way target article-box contains text i'm looking for?
you're using global selector .article-box , doesn't point in way should parent element of .article-category containing 'free' text.
you should remember you're creating collection, there might more 1 element containing 'free' text. you've iterate through each element, find it's closest .article-box , add 'free' class it.
$('.article-category:contains(free)').each(function() { $(this).closest('.article-box').addclass('free'); });
Comments
Post a Comment