0

How can I grab all the names under "Followed by" category from the below elements. The way the name have been laid out is kinda foreign to me that is why I can't get all of them. I have already used a selector which is capable of grabbing the first one. However, I expect to have all the names under "Followed by" title and until "edited_into" title. Thanks in advance.

Here is a link to the elements within which the required names are: https://www.dropbox.com/s/nzmvfc75szlgyyn/elements%20for%20expression.txt?dl=0

The selector I've tried with:

a#followed_by+h4.li_group+div.odd a

The result I'm having is only the first name:

Star Trek V: The Final Frontier

Btw, my only intention is to parse the names using this selector not to style.

SIM
  • 21,997
  • 5
  • 37
  • 109

1 Answers1

1

The selector you have is almost correct.

a#followed_by+h4.li_group ~ div.soda a

The ~ works differently to the + in that it will select any matching element after the first part of the selector, whereas the + will only select elements immediately following the first part of the selector. Of course, by "first part" I am referring to a#followed_by+h4.li_group.

I've also changed the selector to find div.soda rather than div.odd so you get all relevant elements, rather than just the odd ones.

Because of the way CSS selectors work, we can't ask for "only elements up until edited_into". We can, however resolve this using JavaScript.

A simple for loop with a conditional break will be the simplest method.

var titles = [];
var items = document.querySelectorAll('a#followed_by+h4.li_group ~ div.soda a');
//firstEditedIntoItem represents the first element in
//the `edited_into` section. If it's null, then there
//is none, and we have nothing to worry about.
var firstEditedIntoItem = 
    document.querySelector
    ('a#edited_into+h4.li_group+div.soda a, a#spin_off_from+h4.li_group+div.soda a');
    //   Note: This selector will find the first instance that matches any of the
    //   specified sections. You could add another and replace `spin_off_from` with
    //   another section id.
for(var i=0; i<items.length; i++) {
    var it = items[i];
    //don't accept elements after 'edited_into'
    // If firstEditedIntoItem is null, it will not match either.
    if(it==firstEditedIntoItem) break;
    titles.push(it.textContent);
}
console.info(titles.join('\n'));
mike
  • 56
  • 1
  • 5
  • Thanks mike for your solution. Using your selector, I'm getting all the names after "followed by" title which is partially what i want. However, my intention is to start from followed by title but stops as soon as it finds "edited_into" title. Otherwise it will grab all of them. Perhaps you didn't notice that I also mentioned it in my description above. Thanks again mike. – SIM Aug 30 '17 at 05:54
  • Oh, of course - you're right I missed that part, somehow. It's not really possible to do this purely with CSS - unless I'm missing something. Assuming JS is fine, you can stop processing the list after you encounter the first element after the "edited_into" section. I can update the answer with some example code if you're interested. – mike Sep 04 '17 at 03:48
  • Very much interested. Btw, I am accepting your answer. Hope you will edit the part you offered. – SIM Sep 04 '17 at 07:53
  • Thanks. I've updated the answer with some example code. Removing the comments, it's just 8 lines of code; so should be fairly easy to follow - but let me know if you would like more explanation. – mike Sep 05 '17 at 00:39