Получить цвет фона первого пролета внутри div

Question

Я пытаюсь использовать jQuery для динамического изменения цвета фона div в соответствии с цветом фона первого диапазона.

<div class="sn-stream-textarea-container">
   <span class="sn-stream-input-decorator" style="background-color: #badaff"></span>
   <textarea id="activity-stream-comments-textarea" class="sn-string-textarea form-control ng-pristine ng-untouched ng-valid ng-isolate-scope ng-empty ng-valid-required" placeholder="Customer facing notes (Customer visible)" data-stream-text-input="comments" ng-required="activity_field_0.mandatory &amp;&amp; !activity_field_0.filled" ng-model="activity_field_0.value" ng-attr-placeholder="{{activity_field_0.label}}" sn-sync-with="activity_field_0.name" sn-sync-with-value-in-fn="reduceMentions(text)" sn-sync-with-value-out-fn="expandMentions(text)" mentio="" mentio-id="'activity-stream-comments-textarea'" mentio-typed-term="typedTerm" mentio-require-leading-space="true" mentio-trigger-char="'@'" mentio-items="members" mentio-search="searchMembersAsync(term)" mentio-template-url="/at-mentions.tpl" mentio-select="selectAtMention(item)" mentio-suppress-trailing-space="true" sn-resize-height="" autocomplete="off" style="overflow: hidden; overflow-wrap: break-word; height: 64px;" aria-invalid="false"></textarea>
</div>

Можете ли вы помочь мне указать правильное направление?

Я пытался использовать prop ("class"), потому что у этого div нет идентификаторано я не уверен, как я могу получить первый промежуток внутри div.

Это то, как далеко я зашел ... Я думаю, что я почти там, но не могу найти элемент.https://jsfiddle.net/rmcardoso/ps1q82zk/6

Большое спасибо, Раф

Answer 1

Рабочий код:

$('.sn-stream-textarea-container').each(function(){
    var bColor = $(this).find('span:first').css('background-color');
    $(this).css('background-color', bColor);
});

Answer 2

Чистый код JS

const elements = document.querySelectorAll(".sn-stream-input-decorator")
for (const element of elements) {
 
 // change background of the parent node. 
 element.parentNode.style.backgroundColor = element.style.backgroundColor
 
 // Use one of these two to change background of the textarea
 element.nextElementSibling.style.backgroundColor = element.style.backgroundColor
 
 // document.getElementById("activity-stream-comments-textarea").style.backgroundColor = element.style.backgroundColor
}

<div class="sn-stream-textarea-container">
   <span class="sn-stream-input-decorator" style="background-color: #badaff"></span>
   <textarea id="activity-stream-comments-textarea" class="sn-string-textarea form-control ng-pristine ng-untouched ng-valid ng-isolate-scope ng-empty ng-valid-required"></textarea>
</div>

https://jsfiddle.net/40cunwho/

Answer 3

У textarea есть id, вы можете собрать его и найти его брата с нужным вам классом, а затем прочитать его атрибут background-color css.

var bc = $("#activity-stream-comments-textarea").siblings(".sn-stream-input-decorator").css("background-color");

РЕДАКТИРОВАТЬ

Вот как вы можете изменить цвет фона текстовой области:

$("#activity-stream-comments-textarea").css("background-color", $("#activity-stream-comments-textarea").siblings(".sn-stream-input-decorator").css("background-color"));

Или, начиная с вашего кода в предоставленной вами скрипте:

$(".sn-stream-textarea-container").each(function(index,element){
    $(element).find("textarea:last").css('background-color', $(element).find('span:first').css('background-color'));
});