1

I'm new to jQuery, when I applied jquery .css() method without using closest, it's working fine, but in case of closest same method is not working.

Please refer snippet:

 //$('span').css("color","red");
$("body").delegate("button", "click", function () {
  $(this).closest('span').css("color","red");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click to change color of span</button>
<span> Me Span here</span>
halfer
  • 19,824
  • 17
  • 99
  • 186
WC2
  • 317
  • 1
  • 9

2 Answers2

4
  1. Spell button correctly
  2. delegate is deprecated. Don't use it. Use on instead.
  3. closest searches the element's ancestors. The span you are looking for is not an ancestor, it is a sibling. Use siblings. You can also use next() if you have multiple buttons and spans all bundled together.

$("body").on("click", "button", function () {
  $(this).siblings('span:first').css("color","red");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click to change color of span</button>
<span> Me Span here</span>
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • 1
    `You can also use :first if you have multiple buttons and spans all bundled together.` In this case, I would recommend to use `.next()` instead – Tân Nov 06 '18 at 16:17
  • I upvoted but ...its not d solution to my query...what if in case of multiple spans as siblings ...I want to select d element span closest to button .....now trying by using element "Index" ...by checking which span has nearest value to my button. – WC2 Nov 06 '18 at 16:30
  • What if in case of span added before my button.....its all dynamic ....so I can't rely on specific element selection. – WC2 Nov 06 '18 at 16:34
  • 1
    @WC2 — It might be dynamic, but there needs to be some logic that you can implement in code. Start by identifying that logic. I'm not going to update this answer over and over every time you move the goalposts. – Quentin Nov 06 '18 at 16:35
  • Hi ..... @Quentin ...I have built that logic....please check fiddle https://jsfiddle.net/xpvt214o/926052/ – WC2 Nov 06 '18 at 17:22
0

Try this... parent().find()

$('button').on('click', function() {
  $(this).parent().find('span').css("color","red");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button>Click to change color of span</button>
<span> Me Span here</span>

Multiple span scenario 

$('button').on('click', function() {
  $(this).parent().find('span:first').css("color","red");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span> Me Span here</span>
<button>Click to change color of span</button>

<p>
paragraph
</p>
<span> Me Span here</span>
Sooriya Dasanayake
  • 1,106
  • 1
  • 7
  • 14
  • What if I have multiple span inside my parent div....but I wanted only closest span to be changed... – WC2 Nov 06 '18 at 16:48
  • use `find('span:first')` – Sooriya Dasanayake Nov 06 '18 at 16:50
  • No...if I add more spans before my button then ....using first I won't get closest to b changed.... by d way i have done it..check fiddle https://jsfiddle.net/xpvt214o/926052/ – WC2 Nov 06 '18 at 17:21