1

What is the main difference between $('div + p') and $('div ~ p').

If i have something like this 

<div class="active"></div>
<p class="pactive"></p>

Returning the same value.

Jayababu
  • 1,641
  • 1
  • 14
  • 30
  • 2
    [Next Adjacent Selector (“prev + next”)](https://api.jquery.com/next-adjacent-selector/) and [Next Siblings Selector (“prev ~ siblings”)](https://api.jquery.com/next-siblings-selector/) – Satpal Jun 17 '15 at 12:26
  • 2
    They have a [horrible habit](https://api.jquery.com/next-adjacent-selector/) of hiding this sort of information [in the documentation](https://api.jquery.com/next-siblings-selector/) – Jamiec Jun 17 '15 at 12:26
  • 1
    Why not just look in the documentation ? There's no secret here ! – Denys Séguret Jun 17 '15 at 12:26
  • 1
    It is fine for the question to be asked here as Stackoverflow is for many developers the first port of call. – Mr. Mr. Jun 17 '15 at 12:29
  • 2
    @MrGray - And that succinctly sums up all that is wrong with this industry. First port of call should be some rational thought ("hmm, maybe that level of information is documented somewhere") not "I wonder if someone has the time to spoon-feed me information" – Jamiec Jun 17 '15 at 12:30
  • No, just be helpful, being otherwise is what is wrong. – Mr. Mr. Jun 17 '15 at 12:30
  • 1
    @MrGray No, we don't need more trivial questions that are already answered both on SO and in the canonical documentation. – Denys Séguret Jun 17 '15 at 12:31
  • @MrGray, congratulations. You're part of the problem, not of the solution. – Frédéric Hamidi Jun 17 '15 at 12:33
  • @FrédéricHamidi This is a knowledge base and any question that fits the format is fine, I don't want to get personal about it, if the question has already been asked and answered on SO then flag it, don't attack me for my opinion. – Mr. Mr. Jun 17 '15 at 12:36
  • 1
    @MrGray, we aim to be the *best* repository of knowledge around, and copy-pasting documentation back at questioners does not really achieve that goal, especially now that we're flooded with no-research questions all day long. I'm not getting "personal" here, but your comment is just wrong, and it would be a pity if users were to take it as the community's stance. If you don't want others to challenge your opinions, maybe you should not post them in comments. – Frédéric Hamidi Jun 17 '15 at 12:42
  • 1
    @jamiec Sometimes what may look like easy to find information might not be so. He asked a valid question is all I am saying and we can't possibly know what thoughts he did or didn't have, to presume otherwise is actually not helpful, flagging the question as a duplicate is helpful. – Mr. Mr. Jun 17 '15 at 12:43
  • @FrédéricHamidi I have no problem people challenging my opinions, just wish it was done in a more constructive fashion. I agree that we are trying to make this a good place for knowledge but not everyone is at the same level so the questions being asked may be from relative naivety and we should be sensitive to that or people won't come back here. – Mr. Mr. Jun 17 '15 at 12:45
  • While we can hopefully agree that trivial questions should be researched first, asked later - the fact is that this question has already been asked and if there is an existing answer, point the OP there, and move on. There are some users who, unlike Mr Gray, consider even flagging questions as dupes to be unhelpful - for reasons I cannot comprehend. – BoltClock Jun 18 '15 at 06:35

3 Answers3

2

Take an example

div + p

Selects all <p> elements that are placed immediately after <div> elements

p ~ ul

Selects every <ul> element that are preceded by a <p> element and have the same parent element.

Check out the CSS REFERENCE Selectors

Abhinav
  • 8,028
  • 12
  • 48
  • 89
  • 1
    You should provide a reference (source) link when marking text like that. – Noel Widmer Jun 17 '15 at 12:33
  • Well I actually misunderstood your comment,I thought you wanted me to provide some kind of code with a refering to some jsfiddle link. Thanks for the suggestion, I have made the update – Abhinav Jun 17 '15 at 12:39
  • No, that is not necessary. But text marked like that means you have copied it from somewhere. If you haven't copyied it from the question you really should provide a source. +1 for doing so – Noel Widmer Jun 17 '15 at 13:05
  • sure..I ll keep it in mind from next time :) – Abhinav Jun 17 '15 at 13:06
1

X + Y

ul + p {
   color: red;
}

This is referred to as an adjacent selector. It will select only the element that is immediately preceded by the former element. In this case, only the first paragraph after each ul will have red text.

X ~ Y

ul ~ p {
   color: red;
}

This sibling combinator is similar to X + Y, however, it's less strict. While an adjacent selector (ul + p) will only select the first element that is immediately preceded by the former selector, this one is more generalized. It will select, referring to our example above, any p elements, as long as they follow a ul.

For Reference

G.L.P
  • 7,119
  • 5
  • 25
  • 41
  • "In this case, only the first paragraph after each ul will have red text." **No.** Only a paragraph that directly follows an unordered list will have this rule applied. – connexo Jun 17 '15 at 12:30
  • 3
    "It will select, referring to our example above, any p elements, as long as they follow a ul." Again, **no.** It will select all `p` element that come after a ul in the markup **and** that share the same parent element. – connexo Jun 17 '15 at 12:33
-1

I found the answer.

<div class="active"></div>
<p class="pactive"></p>
<div></div>
<p></p>
<div></div>
<p></p>
<div></div>

$("div.active + p") will only select the p with class pactive(ie. p next to the div, same as $(div).next();)

Result:

<p class="pactive"></p>

where as $("div.active ~ p") will select all the sibling ps which will come after the div.active only.If any p element is there before div.active it wont select that p.

Result:

<p class="pactive"></p>
<p></p>
<p></p>
Jayababu
  • 1,641
  • 1
  • 14
  • 30