Question

I have this Chrome Extension, it adds a poke all button under your pokes. I am trying to update it so when you have 6 pokes or more, the “Show All (6)” makes it refresh My poke all button. [because it disappears when you click on the “Show all (6)”]. So in my code this is how I add the button:

$("#pagelet_pokes a:last").after(html_code)

so in facebook there is a div with the id=”pagelet_pokes”, it has tons of sub divs, and eventually there is a div w/ class=’phs’, with a , and in that list are the poke links.

So to simplify:

<div id='pagelet_pokes'>
...
<div class='phs'>
<ul>
<li><div><div><a href>Poke #1</a></div></div></li>
<li><div><div><a href>Poke #2</a></div></div></li>
</div>
</div>

So jQuery adds my button, after the last . That works fine.

The problem is, the “Show all (6)” adds another <li> at the bottom, and when clicked, it hides itself instead of removing it [display=none]. so after the above code, it adds:

<li class='showAll'>
<a href='#'>
<span class='fwb'>Show all (6)</span>
</a>
</li>

Now, I tried changing my code in my javascript to this:

 $("#pagelet_pokes a:last").not('.showAll').after(html_code)

It did not work, because, the first selector selects all the <a>s, then discards any a’s that have .showAll, but that doesn’t help because the .showAll is in a child node!

So my question boils down to this.. How do I select the last “a” within #pagelet_pokes, that does not have a child span with the class “pokeAll”? Is there some “!” selector that might work like this? : $('#pagelet_pokes !li.showAll a:last')? Thanks!

Answer 1

Use the not-selector^[docs].

$('#pagelet_pokes li:not(.showAll) a:last')

Or to make your selector valid for querySelectorAll (used internally when possible):

$('#pagelet_pokes li:not(.showAll) a').last()

---

EDIT:

I can’t quite tell from the question, but if that last li that you want to exclude is always there, then I’d be inclined to keep the selector simple, and use the slice()^[docs] method on the result:

$('#pagelet_pokes li a').slice(0, -1);