Блог

Главная - Вопросы по программированию - Jquery считывает буквы в основном порядке строк, концентрирует их в одну строку и возвращает ее

Jquery считывает буквы в основном порядке строк, концентрирует их в одну строку и возвращает ее

#javascript #html #jquery #css

#javascript #HTML #jquery #css

Вопрос:

Во время собеседования у меня была задача создать функцию с использованием jquery, которая считывала бы буквы из таблицы в порядке следования строк, объединяла их в одну строку и возвращала ее. но он должен пропускать буквы, которые имеют одинаковый цвет и цвет фона. Я потерпел неудачу, но я все равно хочу исправить проблему. Можете ли вы помочь мне с этим? я использовал функцию:

 $(document).ready(function () {
  let para = $('th').toArray();
 
  $.map(para, function (i) {
    if ($(i).css('color') !== $(i).css('background-color')) {
      newStr = '';
      newStr = $(i).text();

    
      return newStr;
    }
  });

вот html-код:

 <body>
    <table>
      <tbody>
        <tr>
          <th style="background-color: blue; color: yellow">Q</th>
          <th style="background-color: magenta; color: yellow">A</th>
          <th style="background-color: green; color: green">M</th>
        </tr>
        <tr>
          <th style="background-color: green; color: magenta">P</th>
          <th style="background-color: red; color: red">A</th>
          <th style="background-color: yellow; color: green">Q</th>
        </tr>
      </tbody>
    </table>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="app.js"></script>
</body>

Комментарии:

1. Я предполагаю, что вы очищаете newStr на каждой итерации вашей карты. Должно быть newStr = и newStr должно быть выведено за пределы map — Также, куда бы вы вернули newStr ?

2. @AlwaysHelping на всякий случай, поскольку все элементы имеют разные цвета и фон, все они должны быть объединены, верно?

3. @PranavRustagi Нет. только четыре должны быть объединены — два элемента в таблице имеют одинаковый цвет и одинаковый размер.

Ответ №1:

Вот так :

 var str = "";

$('th').each(function() {
  if ($(this).css("color") != $(this).css("background-color")) {
    str  = $(this).text();
  }
});

console.log(str);  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <th style="background-color: blue; color: yellow">Q</th>
      <th style="background-color: magenta; color: yellow">A</th>
      <th style="background-color: green; color: green">M</th>
    </tr>
    <tr>
      <th style="background-color: green; color: magenta">P</th>
      <th style="background-color: red; color: red">A</th>
      <th style="background-color: yellow; color: green">Q</th>
    </tr>
  </tbody>
</table>

Комментарии:

1. это слишком сложный пранав. приведенный выше код в вопросе уже решен. просто поместите newStr = '' вне карты и добавьте , как newStr = на карте. Те же результаты

2. @AlwaysHelping извините! map В настоящее время я не знаком с. Я все еще учусь. Обязательно научусь 🙂

3. Нет проблем 🙂 Хотя это хорошая попытка 🙂 — вот о чем я говорю в своих комментариях = jsfiddle.net/w1x2p3s5

4. @AlwaysHelping проверьте это еще раз… Теперь он короче. На самом деле я выполнил основной столбец в предыдущем.