Почему стили не применяются к второму элементу?

314

29 августа 2017, 09:55

Всем привет Есть подобная структура :

<tr>
  <td class="UpCalThIndex"></td>
  <td class="UpCalTh"></td>
  <td class="UpCalThIndex test"></td>
</tr>

И такой скрипт :

var leftOffset = 0;
var rightOffset = 0;
$('#calendar-container').scroll(function() {
    $('.UpCalThIndex').not('.test').css({
    'position' : 'absolute',
    'left' : $(this).scrollLeft() + leftOffset,
    'z-index': 9999,
    'display': 'block',
    'height': '50px'
  });
  $('.UpCalThIndex.test').css({
    'position' : 'absolute',
    'left': 'auto',
    'right' : $(this).scrollRight() + rightOffset,
    'z-index': 9999,
    'display': 'block',
    'height': '50px'
  });
});

В результате, отрабатываются стили только для элемента $('.UpCalThIndex').not('.test'), а для второго нет. Почему???

Answer 1

Кое-где кое-что пришлось заменить, все работает (надо логи смотреть где и что у тебя не так) ... Думается проблема в scrollRight() - без понятия что это.

var leftOffset = 0; 
var rightOffset = 0; 
 
$('.UpCalThIndex').not('.test').css({ 
  'position' : 'absolute', 
  'left' : 200, 
  'z-index': 9999, 
  'display': 'block', 
  'height': '50px' 
}); 
$('.UpCalThIndex.test').css({ 
  'position' : 'absolute', 
  'left': 'auto', 
  'right' : 200, 
  'z-index': 9999, 
  'display': 'block', 
  'height': '50px' 
}); 
 
console.log($('.UpCalThIndex').not('.test').attr('style')); 
console.log($('.UpCalThIndex.test').attr('style'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<table> 
  <tr> 
    <td class="UpCalThIndex"></td> 
    <td class="UpCalTh"></td> 
    <td class="UpCalThIndex test"></td> 
  </tr> 
</table>