jQuery: Selecting adjacent tags unless separated by text
I’m trying to find and combine adjacent
em tags inside of paragraphs but it’s proving more difficult than I expected. Consider the following examples:
In the first and second examples above, I would expect
$("em + em") to properly select the second
em tag. What I didn’t expect was that it would also select cases like the third example where text appears between them.
Is there a way to detect the text between these tags and treat them differently?
What I didn’t expect was that it would also select cases like the third example where text appears between them.
The adjacent sibling combinator,
+, doesn’t take text into consideration. It will just select the immediately following sibling element.
You could filter all the adjacent
em elements based on whether the previous sibling is an element or whitespace and exclude the element if text appears between the tags.
In the example below, the
em in the third
p isn’t selected because the previous node is text.
” If you want, you can also create a custom jQuery method.
For instance, here is a custom
.nextWithoutText() method that will select the next element supplied if there isn’t text in between the elements.