Как изменить содержимое таблицы с одинаковым идентификатором в зависимости от разрешения?

Question

Если я хочу изменить содержимое мобильной таблицы на основе идентификатора, это не сработает, поскольку идентификатор в коде все еще сохраняется в обеих таблицах.Это всегда будет первая таблица.

<!-- Desktop -->
<table class="hidden-xs">
	<tr>
		<td><span id="my_id">content</span></td>	
	<tr>
</table>

<!-- Mobile -->
<table class="hidden-sm hidden-md hidden-xl hidden-lg">
	<tr>
	  <td><span id="my_id">content</span></td>	
	<tr>
</table>

Как изменить правильное содержимое таблицы в зависимости от разрешения?

Answer 1

Сначала вы можете выбрать видимую таблицу, а затем найти .content, например:

$('table:visible').find('.content').css('color', 'red');

.hidden-xs {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Desktop -->
<table class="hidden-xs">
    <tr>
        <td><span class="content">Desktop</span></td>    
    <tr>
</table>

<!-- Mobile -->
<table class="hidden-sm hidden-md hidden-xl hidden-lg">
    <tr>
      <td><span class="content">Mobile</span></td>  
    <tr>
</table>

Примечание : вы НЕ должны использовать один и тот же идентификатор дважды, идентификатор должен быть уникальным.Попробуйте вместо этого использовать имя класса.

Answer 2

Вы можете использовать класс вместо идентификатора, это решит проблему

<!-- Desktop -->
<table class="hidden-xs">
    <tr>
        <td><span class="content" id="my_id">content</span></td>    
    <tr>
</table>

<!-- Mobile -->
<table class="hidden-sm hidden-md hidden-xl hidden-lg">
    <tr>
      <td><span class="content" id="my_id">content</span></td>  
    <tr>
</table>

Затем вы можете изменить его, используя jQuery:

$('.content').html('New content');