Using jQuery, css not changing

Question

I've assigned one of up to five (ListNumberOld is between 1 and 5) p elements as follows:

PreviousSelection = $(this).siblings(".result").find("p:nth-child('" + ListNumberOld + "')");

I'm now trying to update it's CSS:

PreviousSelection.css("background-color","black")

But the css is not changing, is there anything reason from the above code? I've even tried to display the current css using:

alert (PreviousSelection.css("background-color")); << FIXED

...but the alert does't appear << FIXED

I've even tried adding/removing styles:

        CurrentSelection = $(this).siblings(".result").find("p:nth-child(" + ListNumber + ")");
          CurrentSelection.removeClass("resultSelectedNot");
          CurrentSelection.removeClass("resultSelected");

...but again, nothing happens

HTML as requested. Updating .css or add/removeClass works for the .result, but not for children.

<form id="frmTransListRecord_00002" name="frmTransListRecord_00002" method="post">        
<div id="idTransListRecordLineColWrapper_TransID" style="display: none" class="clTransListRecordLineColWrapper">            
<div class="clTransactionListingCol_ID clTransListFieldValues">ID</div>         
<div class="clTransactionListingCol_ID clTransListFieldValues">           
  <input type="text" name="txtTransactionID" value="-" readonly="" size="6" class="clTransField clTextAlignCenter clTransValue_TransID">              
  <input type="text" name="txtTransactionID_B" value="-" hidden="" size="6" class="clTransField clTextAlignCenter clTransValue_TransID">            </div>        </div>          
<div id="idTransListRecordLineColWrapper_AccountID" class="clTransListRecordLineColWrapper">            
<div><span>Account</span></div>         
<div>             <input class="clParentTransID" hidden="" value="TMP">           <input type="text" id="txtAccountID" hidden="" readonly="" class="clTransField">            <input type="text" id="txtAccountIDName" class="clLiveSearchAccountChild clTransField" autocomplete="off" placeholder="Search Accounts...">             
<div class="result" style="background-color: rgb(255, 255, 255); border: thin solid; padding: 0.5em;">
  <p id="1" class="x">[2]|[ENTRY 1]</p>
  <p id="2" class="x">[3]|[ENTRY 2]</p>
  <p id="3" class="x">[4]|[ENTRY 3]</p>
  <p id="4" class="x">[5]|[ENTRY 4]</p>
</div>              
</div>         
</div>        
</form>

Note that this is dynamically added, both the .result and the child ps.

The weird thing is, it works for the parent element, a div, but not for the child 'p's. Looking at Chrome's inspector, it's refusing to add either the CSS or the Class to the children. — aSystemOverload
– aSystemOverload, Commented Apr 17, 2017 at 22:52
If your <p> really do have IDs on them, why not just target those instead of getting fancy? — Waxi
– Waxi, Commented Apr 17, 2017 at 23:31

Dan Philip Bejoy · Accepted Answer · 2017-04-17 22:20:18Z

1

The nth-child accepts an integer value and should not be included in quotes, So just append the value ListNumberOld without the quotes.

 PreviousSelection = $(this).siblings(".result")
                            .find("p:nth-child("+ListNumberOld+")");

answered Apr 17, 2017 at 22:20

Dan Philip Bejoy

4,4032 gold badges20 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Johannes · Accepted Answer · 2017-04-17 22:51:47Z

1

The number in nth-child(n) shouldn't be in quotes, so it should be

PreviousSelection = $(this).siblings(".result").find("p:nth-child(" + ListNumberOld + ")");

(removed the single quotes)

And use a : and additional curly brackets in this code:

PreviousSelection.css({"background-color": "black"});

edited Apr 17, 2017 at 22:51

answered Apr 17, 2017 at 22:03

Johannes

67.9k22 gold badges84 silver badges139 bronze badges

2 Comments

aSystemOverload Over a year ago

Well the alert works, but the css is still not changing. I've exactly the same, but for CurrentSelection, a different nth-child, that should change it to a diff colour, but nothing happens.

Dan Philip Bejoy Over a year ago

If its a single CSS property you can do .css("background-color","black")

Collectives™ on Stack Overflow

Using jQuery, css not changing

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related