Ответы пользователя по тегу JavaScript
  • Как задать в Jquery чтобы минусовало не менее чем переменная?

    erge
    @erge
    Примус починяю
    Я так понимаю что в $('.knopka1') лежит "суммарная" цена = прайс * кол-во, тогда так и считать, а кол-во ограничивается снизу единицей.

    $('.quantity_inner .bt_minus').click(function() {
        let $input = $(this).parent().find('.quantity');
        let $val   = $('.knopka1');
        let count = parseInt($input.val()) - 1;
        count = count < 1 ? 1 : count;
        let price_val = parseFloat($val.data('price'));
        let curr_val = count * price_val;
        $input.val(count);
        $val.text(curr_val);
    });
    Ответ написан
    Комментировать
  • Какой самый легкий модуль скрипта оплаты для html сайта взять?

    erge
    @erge
    Примус починяю
    Если сайт на HTML/CSS и без телодвижений на этом сайте, то наверно не модуль, а - платежный шлюз? легко "гуглится"... "Crypto Payment Gateways", например - 12 Best Crypto Payment Gateways in 2022
    Да и собственно зачем эти лишние приводы нужны? ведь можно же сделать перевод из кошелька по номеру другого кошелька без каких либо проблем, указывайте просто номера кошельков в разных криптомонетах , ой ну да, надо скопировать номер кошелька, надо самому указать сумму... ну, платежные шлюзы смотрите.
    Ответ написан
    Комментировать
  • Как найти скрипт часов на этом сайте?

    erge
    @erge
    Примус починяю
    Открываете сайт например в Chrome, открываете "инструменты разработчика/инспектор кода" (Ctrl+Shift+I или F12), выбираете иконку "квадратик со стрелкой" (Select and element in the page to inspect it) или просто жмете Ctrl+Shift+C, тыкаете в блок с часами, в коде подсвечивается кусок:

    <td class="local_time0" data-tz="Europe/Saratov">Thu, 29 Apr 2021 09:50:04 +0400</td>


    соответственно запись производится в этот элемент, надо найти где и единственный разумный идентификатор этого элемента, не считая разных извращений, это class="local_time0"
    соответственно ищем строку local_time0 по коду и всем подгружаемым js-кам
    1. в лоб не получилось ничего не нашлось...
    2. ищем local_time и находим в файле js/ip.js (смотри вкладку Sources в инспекторе) функцию в которой происходит обращение к этому элементу:

    function t() {
            try {
                if (!i)
                    return !0;
                for (var t, e = new Date, a = ".local_time", n = [], r = [], o = 0; o < 2; o++)
                    n[o] && r[o] || (n[o] = $(a + o).data("tz"),
                    r[o] = $(a + o).text().substr(25)),
                    t = Intl.DateTimeFormat("en-GB", {
                        weekday: "short",
                        day: "2-digit",
                        month: "short",
                        year: "numeric",
                        hour: "numeric",
                        minute: "numeric",
                        second: "numeric",
                        timeZone: n[o]
                    }).format(e),
                    $(a + o).text(t.slice(0, 16) + t.slice(17) + r[o]);
                return !0
            } catch (t) {
                return !1
            }
        }
        t() && window.setInterval(t, 1e3)

    здесь же видно как получается local_time0
    a = ".local_time"
    o = 0

    и далее обращение к элементу посредством jquery
    $(a + o).text()

    как-то так...
    Ответ написан
    Комментировать
  • Openweather из JSON в HTML как лучше сделать?

    erge
    @erge
    Примус починяю
    дату не обязательно брать из .dt она есть в текстовом виде в .dt_txt

    Даллее, есть два варианта, развернуть объект в:
    {"2019-12-22":[{"dt":1577048400,"main":{"temp":-21.94,"feels_like":-26.97,"temp_min":-22.46,"temp_max":-21.94,"pressure":1018,"sea_level":1018,"grnd_level":1013,"humidity":99,"temp_kf":0.52},"weather":[{"id":802,"main":"Clouds","description":"scattered clouds","icon":"03n"}],"clouds":{"all":34},"wind":{"speed":1.97,"deg":139},"sys":{"pod":"n"},"dt_txt":"2019-12-22 21:00:00"}],
    ...}

    где ключи - это даты.
    и работать уже по датам...

    развернуть можно тем же map'ом

    let wd = {};
    data.list.map(e => {
    	let dt = e.dt_txt.split(" ")[0];
      if(typeof(wd[dt])!="undefined") {
      	wd[dt].push(e);
      } else {
      	wd[dt] = [];
      }
    });
    console.log(JSON.stringify(wd));


    либо ввести переменную "состояния" в которой хранить текущую дату и последовательно проходя по объекту сверять дату записи с датой в переменной, если они != то запоминать новую дату, добавлять перед выводом записи, вывод табличной строки с датой.

    как-то так:

    let iconUrl="";
    
    let wdate = ""; // переменная состояния
    function forecastTemplate (localData) {
    				let s = "";
            if (localData.dt_txt.split(" ")[0] != wdate) {
            	wdate = localData.dt_txt.split(" ")[0];
              s += `
              <tr><td colspan=2>${wdate}</td>
              `;
            }
            s += `
               <tr>
                    <td>
                        <div class="flex">
                            <div>
                                <span>${localData.dt_txt.split(" ")[1]}<span>
                            </div>
                            <div>
                                <img src="${iconUrl}${localData.weather[0].icon}@2x.png">
                            </div>
                        </div>
                    </td>
                    <td>
                        <div class="flex">
                            <div>
                                <span class="temp">${localData.main.temp}&#8451</span>
                            </div>
                            <div>
                                <span class="description">${localData.weather[0].description}</span>
                            </div>
                        </div>
                        <div class="flex">
                            <div>
                                <span>wind: ${localData.wind.speed} m/s,</span>
                            </div>
                            <div>
                                <span>clouds: ${localData.clouds.all}%,</span>
                            </div>
                            <div>
                                <span>pressure: ${localData.main.pressure} hPa</span>
                            </div>
                        </div>
                    </td>
               </tr>`
            return s
        }
    
    let html = "";
    document.body.innerHTML = `<table>${data.list.map(forecastTemplate).join("")}</table>`;


    См. на jsfiddle:


    PS: состояние-дату, можно хранить в свойстве вашего объекта updateUI
    Ответ написан
    Комментировать
  • Как при прохождение цикла по объекту узнать, является ли свойством объекта другой объект?

    erge
    @erge
    Примус починяю
    Можно ли дойдя с помощью цикла до свойства hosts понять, что оно является объектом?


    typeof()

    console.log(typeof({}));
    // object


    for (var key in data) {
      if(typeof(data[key]) == "object") {
        console.log (key + " is object");
      }
    }



    Просто мне необходимо в этом случае, добавлять в тело цикла(или условия) после самого объекта(в данном случае data), или .объект или [свойство].


    вообще не понял о чем вы говорите...

    Кстати, с помощью какого метода, я смогу это всё добавлять? Мне нужно добавить либо data.hosts либо data[свойство]


    добавлять ЧТО и добавлять КУДА??

    и записи data.hosts либо data["hosts"] равнозначны.

    добавить в data.hosts еще один элемент?

    см. JavaScript: Как добавить новый элемент в объект?

    data["hosts"][2] = {name: 'web3'}

    но тут возникает неудобство с определением следующего номера ключа, т.к. это НЕ массив!
    с массивом было бы проще.

    data["hosts"][data["hosts"].length] = {name: 'web3'}
    // или
    data["hosts"].push( {name: 'web3'} );


    Upd:

    По мотивам комментариев:
    Решение.... рекурсивная функция
    const data = {
      user: 'ubuntu',
      hosts: {
        0: {
          name: 'web1',
        },
        1: {
          name: 'web2',
          null: 3,
        },
      },
    };
    
    // классически на if
    function getIn(obj, parr) {
      if(typeof(obj[parr[0]]) == "undefined") {
        return null;
      } else {
        if(typeof(obj[parr[0]]) == "object") {
          if(parr.length > 1) {
            return getIn(obj[parr[0]], parr.slice(1))
          } else {
            return obj[parr[0]]
          }
        } else {
          return obj[parr[0]];
        }
      }
    }
    
    
    // защита от дурака (когда некорректные параметры) + switch case
    function getIn(obj, parr) {
      if (
        typeof(obj) != "object" ||
        typeof(parr) != "object" ||
        parr.length == "undefined" ||
        parr.length == 0
      ) return null;
      switch (typeof(obj[parr[0]])) {
        case "undefined":
          return null;
        case "object":
          return (parr.length > 1)? getIn(obj[parr[0]], parr.slice(1)):obj[parr[0]]
        default:
          return obj[parr[0]];
      }
    }
    
    // еще короче 
    function getIn(obj, parr){
      return !(
        typeof(obj) != "object" ||
        typeof(parr) != "object" ||
        parr.length == "undefined" ||
        parr.length == 0
      )?
        typeof(obj[parr[0]]) == "object" ?
          (parr.length > 1)?
            getIn(obj[parr[0]], parr.slice(1)):obj[parr[0]] :
             obj[parr[0]] ?
              obj[parr[0]]: null:
              null
    }
    
    // и стрелочной функцией
    const getIn = (obj, parr) => !(
        typeof(obj) != "object" ||
        typeof(parr) != "object" ||
        parr.length == "undefined" ||
        parr.length == 0
      )?
        typeof(obj[parr[0]]) == "object" ?
          (parr.length > 1)? getIn(obj[parr[0]], parr.slice(1)):obj[parr[0]] :
           obj[parr[0]] ? obj[parr[0]]:null :
        null;


    UPD2:

    Решение без рекурсивного вызова
    function getIn(obj, parr) {
      let o = obj;
      for(let i=0; i< parr.length; i++) {
        o = o[parr[i]];
        if(typeof(o)=="undefined") return null;
      }
      return o;
    }
    Ответ написан
  • Как проверить форму в jquery?

    erge
    @erge
    Примус починяю
    В функцию обработки клика по кнопке
    $('.popup-button').on('click', function () {
        $('.popup-thanks').fadeIn(),
          $('.popup-callback').fadeOut();
      });


    вставить проверку обязательных полей формы.
    и выполнять блок
    $('.popup-thanks').fadeIn(),
          $('.popup-callback').fadeOut();

    только если заполнены обязательные поля.

    UPD:
    как-то так:
    $('.popup-button').on('click', function () {
        if (
            // проверка заполнения имени
            $(".popup-input-name").val().length > 1 &&
            // проверка корректного заполнения телефона
            /^\+?7[ -]?\(?\d{3}\)?[ -]?\d{3}[ -]?\d{2}[ -]?\d{2}$/.test( $(".popup-input-phone").val() ) &&
            // проверка корректного заполнения e-mail
            /^[a-z0-9\-\.]+@[a-z0-9\-\.]+\.[a-z]+$/i.test( $(".popup-input-mail").val() )
           ) {
            $('.popup-thanks').fadeIn(),
            $('.popup-callback').fadeOut();
        } else {
            alert ("Просьба корректно заполнить поля формы");
        }
      });


    PS: Вместо алерта можно вставить отображение модального окна с соответствующим текстом.
    Ответ написан
  • Скрипт обертывания элементов?

    erge
    @erge
    Примус починяю
    $(".string_block:not(.row):nth-child(2n)").wrapAll("<div class='row' />");


    думаю так тоже должно работать:
    $(".string_block:not(.row):nth-child(even)").wrapAll("<div class='row' />");


    см - Фильтр по месту среди соседей
    CSS :nth-child() Selector
    Ответ написан
    Комментировать
  • Как менять значение сгенерированного объекта в HTML?

    erge
    @erge
    Примус починяю
    вставляйте в контейнер каждый раз заново сгенеренную таблицу не через .append() а через .html()
    либо заморачивайтесь с поиском таблицы, ячеек и их обновлением.
    Ответ написан
    Комментировать
  • Почему при умножении выводится NaN а не число?

    erge
    @erge
    Примус починяю
    не известно что и как вы вводите, какие исходные цифры??
    но режим Ванги подсказывает, каждое значение приводящееся к числу обработать строковыми функциями замены, заменить пробелы на пустую строку и , на .
    и цену приводить к нижнему регистру, вдруг там Руб или РУБ ??

    как-то так.
    quant: Number($(el).find('.cart-popup__calcdisp').find('span').text().replace(/[\s\n\t]/mg, "").replace(/,/mg, ".")),
    
                let priceOfOne = $(el).find('.cart-popup__nums_one').find('span').text().replace(/[\s\n\t]/mg, "").replace(/,/mg, "."),
                    num = priceOfOne.toLowerCase().indexOf('руб'),


    PS: у вас Number() не может переварить 12 100
    поэтому необходимо удалить все пробелы!
    см. https://www.w3schools.com/jsref/tryit.asp?filename...
    пример с Number(x5) = NaN

    PPS: используйте console.log() и поэтапно выводите значения переменных, так и увидите в каком месте затык происходит. потом просто везде удалите эти уже ненужные выводы в консоль.
    Ответ написан
    5 комментариев
  • Как сложить старое и новое значение в одном input?

    erge
    @erge
    Примус починяю
    <input type="text" id="number" value="100">
    document.getElementById("number").onblur = function(){
    	this.value = parseInt(this.defaultValue) + parseInt(this.value);
      this.defaultValue = this.value;
    }


    PS: при потере фокуса происходит перерасчет значения и запись обратно и в defaultValue

    Ответ написан
    1 комментарий
  • Как обработать массивы?

    erge
    @erge
    Примус починяю
    const al   = "АБВГДЕЁЖЗИКЛМНОПРСТУФХЦЧШЩЫЬЭЮЯ "; // Алфавит
    let key1 = "ПЕРВЫЙ"; // первый ключ
    let key2 = "БУКВА"; // второй ключ
    let open_str = "ЭТО СТРОКА ОТКРЫТОГО ИСХОДНОГО ТЕКСТА"; // кодируемый текст
    
    // т.к. в алфавите нет букв Й и Ъ, то производим соответствующую замену:
    key1 = key1.replace("Й","И").replace("Ъ","Ь");
    key2 = key2.replace("Й","И").replace("Ъ","Ь");
    open_str = open_str.replace("Й","И").replace("Ъ","Ь");
    
    // кодируем текст
    let encoded_str = ([...open_str]).map( (e,i) => al[(al.indexOf(e) + al.indexOf(key1[i%key1.length]) + al.indexOf(key2[i%key2.length])) % 32] ).join("");
    
    console.log(encoded_str);


    PS:
    к строке по сути можно обращаться как к массиву - str[index]
    про .map смотрим здесь - https://developer.mozilla.org/en-US/docs/Web/JavaS...
    если вам надо прям вот на МАССИВАХ, то просто сделайте соответствующие переменные "массивами"
    строку в массив можно разбить так str.split("") или [...str]

    по скрипту
    al - строка / массив букв алфавита
    al.indexOf(char) - получаем индекс буквы в алфавите
    по выбору символа из ключа - т.к. ключ у нас заитерирован, то берем остаток от деления индекса кодируемого символа на длину ключа , это и будет символ из ключа - key1[i%key1.length], далее получаем его код по алфавиту - al.indexOf(key1[i%key1.length])

    и у вас много ошибок в таблице, например в третьей строке - конечный символ не И, а З
    и т.д.

    Ответ написан
    Комментировать
  • Какая нужна регулярка чтобы проверка проходила на номера одного оператора?

    erge
    @erge
    Примус починяю
    Вот еще вариант, проверяет номер написанный в любом формате со скобками вокруг кода и без с пробелами и с тире и с + в начале и без

    var str = '90553334849';
    alert(/^\+?9[ -]?\(?05[58]\)?[ -]?\d{3}[ -]?\d{2}[ -]?\d{2}$/.test(str));


    UPD:
    вот проверка (одной регуляркой в одну строку) по массиву кодов

    var str = '9(055)3334849';
    var allow = ['055','058'];
    alert((new RegExp('^\\+?9[ -]?\\(?('+allow.join('|')+')\\)?[ -]?\\d{3}[ -]?\\d{2}[ -]?\\d{2}$')).test(str));


    UPD3:
    Почитайте: https://developer.mozilla.org/en-US/docs/Web/JavaS...
    в разделе "Special characters in regular expressions." расписаны все спецсимволы, которые используются в регулярных выражениях.
    про конструктор new RegExp там тоже есть...

    кокретно в последнем примере:
    т.к. регулярку нам надо создавать "динамически", то используется конструктор new RegExp , который из строки создает и возвращает регулярку и уже у нее вызывается метод .test()
    про строку - в строке спецсимволы \ необходимо экранировать (предварять) символом \
    в строку регулярки мы вставляем все коды из массива allow склеенные через символ |
    регулярка вида (одно|второе|третье) читается как одно ИЛИ второе ИЛИ третье
    в данном случае массив склеивается и реглярка читается как 055 или 058

    ну, как-то так... )
    Ответ написан
    Комментировать
  • Как сделать динамический счетчик видимых элементов одного css класса jquery?

    erge
    @erge
    Примус починяю
    поиск: DOM change event -> https://en.wikipedia.org/wiki/DOM_events

    Mutation : DOMAttrModified

    так же найдено в поиске:
    jsfiddle.net/doktormolle/yQu8v

    модифицируем, смотрим:
    jsfiddle.net/tp2zxhn9

    событие DOMAttrModified отрабатывет при смене класса.

    далее...



    UPD:
    событие на вставку - DOMNodeInserted
    и почти на все изменения - DOMSubtreeModified

    посмотрите/измените jsfiddle.net/tp2zxhn9
    Ответ написан
    Комментировать
  • Как правильно вывести объект в html?

    erge
    @erge
    Примус починяю
    Во-первых, вы непонятно излагаете свои мысли:
    и как сравнить значение, если например 0 - соотв. этому .item добавляем класс

    значит ли это что класс необходимо выставлять элементу в котором значение равно искомому, в данном случае 0 ?

    Во-вторых, вы неправильно берете количество/значение из str
    посмотрите как вы ее заполняете... в ней будет
    0: 1,
    1: 4,
    2: 2,
    3: 4,
    4: 4,
    5: 2,


    после разбивки split'ом
    str.split(', ')[i]
    в count вы присваете ПАРУ значение: количество !
    и это сравниваете с 0 ???
    эту пару необходимо еще раз разбить и взять либо ЗНАЧЕНИЕ, либо КОЛИЧЕСТВО, смотря что вам надо??

    ну и
    если например 0
    то почему у вас стоит условие < 0 ???

    for (let i = 0; i < item.length; i++) {
    	let pair = str.split(', ')[i];
      if (pair.split(': ')[0] == 0) {
        item[i].classList.add('zero');
      }
      item[i].textContent = pair;
    }


    PS: а если количество элементов в массиве изменится??
    может стоит добавлять элементы динамически?
    см. Node.appendChild()

    UPDATE:


    UPDATE 2:
    с добавлением класса:
    Ответ написан
    5 комментариев
  • Как добавить одинаковые обработчики событий на разные элементы?

    erge
    @erge
    Примус починяю
    [prewColor, redColor, blueColor].forEach(el => el.addEventListener('click', e => {
      // код обработчика
    }));
    Ответ написан
    Комментировать
  • Как обновлять таймер по клику?

    erge
    @erge
    Примус починяю
    странная логика заложена у вас.

    1. контейнер для таймер можно/нужно добавить в нужное место в HTML, а не добавлять каждый раз по клику, либо добавлять его по условию (что он еще не создан).

    2. вы безусловно добавляете элементы, а потом лишнее удаляете, зачем?

    3. зачем-то создали специально объект, хотя можно просто работать с массивом и удалять его элементы, массив это тот же объект.
    const items = [];
    items["one"]=1;
    items["two"]=1;
    if(items["one"]) console.log("Есть"); else console.log("Нет");
    delete items["one"];
    if(items["one"]) console.log("Есть"); else console.log("Нет");
    
    // либо
    items["one"]=0;
    if(items["one"]) console.log("Есть"); else console.log("Нет");


    4.
    Мне нужно сделать так, что если человек постоянно кликает по кнопке, то обновлять таймер

    у вас собственно вообще нет обработки повторного клика на туже кнопку, вместо этого у вас
    удаление излишне созданного контейнера, т.к. он выше добавляется безусловно:
    if (index > 0) {
              $(this).remove();
           }

    и возврат из обработчика если есть элемент (т.е. ранее был клик):
    if (items[name]) return;

    5. для возобновления таймера, вам надо написать обработчик повторного нажатия а не выходить из обработчика по условию
    if (items[name]) return;

    т.е. так:
    if (items[name]) {
    // остановка анимации таймера и запуск заново
    } else {
    // код первого запуска таймера.
    }


    остановка анимации, см. метод .stop

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

    как-то так.

    UPDATE:

    Ответ написан
  • Как автоматически задать высоту фрейма?

    erge
    @erge
    Примус починяю
    Про Размеры и прокрутка страницы
    Про Общение между окнами

    Политика «Одинакового источника» говорит, что:

    • если у нас есть ссылка на другой объект window, например, на всплывающее окно, созданное с помощью window.open или на window из и у этого окна тот же источник, то к нему будет полный доступ.
    • в противном случае, если у него другой источник, мы не сможем обращаться к его переменным, объекту document и так далее. Единственное исключение – объект location: его можно изменять (таким образом перенаправляя пользователя). Но нельзя читать location (нельзя узнать, где находится пользователь, чтобы не было никаких утечек информации).



    и есть решение по кроссдоменным iframe
    Автоматическая кросс-доменная установка высоты Iframe

    PS: но скрипты должны интегрироваться на обе стороны, на странице хосте и на странице в ифрейме.

    PPS:
    <iframe src="<?= $link ?>?partnerID=<?= $partnerID ?>" width="100%" height="100%" scroll="no" marginheight="0" frameborder="0" id="<?=$code?>" name="<?=$code?>"></iframe>

    если размеры известны, то их можно и задать в пикселях.
    Ответ написан
    Комментировать
  • Как оптимизировать создание элемента?

    erge
    @erge
    Примус починяю
    • В аттрибут src элемента script нельзя записывать массив!
    • Вы передаете два параметра (адреса), соответственно необходимо создать два элемента script и оба добавить в body


    как-то так:

    function loadScripts(arrScr) {
      arrScr.forEach((src) => {
        var scr = document.createElement('script');
        scr.src = src;
        document.body.appendChild(scr);
      })
    }
    
    if (window.location.href.indexOf('index') != -1) {
         loadScripts(['js/scripts.js', 'js/scripts2.js']);
    }
    Ответ написан
  • Можно ли в JQuery (или чистом JS) создать переменную, которая будет соответствовать DOM? То есть, если элемента больше нет в DOM, то и length равен 0?

    erge
    @erge
    Примус починяю
    // Выдает 1, а должно 0.


    Не должно!
    Потому что .remove()
    Remove the set of matched elements from the DOM.
    т.е. удаляет набор соответствующих элементов из DOM

    что успешно и выполняется.
    но т.к. вы сделали ссылку на этот элемент
    let $elem_1 = $('.elem-2').prev();
    он продолжает существовать и будет удален когда исчезнет последняя ссылка на него.

    нужно удалить ссылку на объект, например так:
    $elem_1 = null;

    т.е. при удалении из DOM, удалять так же и ссылку из переменной:
    $('.elem-1').remove();
    $elem_1 = null;


    так же, если вы объявите саму переменную как свойство какого либо объекта, то ее можно удалить.
    если за функцией то достаточно это сделать без var или let/const, тогда эта переменная будет свойством window
    либо в функции как window.$elem_1
    см. delete

    т.е. в коде вы должны удалять не только из DOM методом .remove(), но и само свойство ("переменную").

    $(function() {
      window.$elem_1 = $('.elem-2').prev();
    
      delete window.$elem_1;
      $('.elem-1').remove();
    
      console.log(window.$elem_1.length);
      // TypeError: window.$elem_1 is undefined
    });


    PS: можно создать объект с соответствующими свойствами и методами и пользоваться методами этого объекта.

    например как-то так:

    $obj = {
    	$elem: null,
      set: function (el) {
      	this.$elem = el;
      },
      del: function() {
      	$(this.$elem).remove();
      	delete this.$elem;
      },
      isExists: function() {
      	return !!this.$elem;
      }
    }
    
    $obj.set( $('.elem-2').prev() );
    
    console.log($obj.isExists(), $obj.$elem.text());
    
    $obj.del();
    
    console.log($obj.isExists());


    объект можно переделать и хранить массив элементов, соответственно переделать и методы манипуляции.

    похожие механизмы реализованы например в React.js
    там есть свой виртуальный DOM с которым и производится манипуляция, которая в последствии переносится на реальный DOM методом render
    Ответ написан
    Комментировать
  • Можно ли как-нибудь получить селектор из JQuery объекта? Или как еще решить такую задачу?

    erge
    @erge
    Примус починяю
    $clone.find($block).css('color', 'red');

    не работает, потому что $block это ссылка на JQuery объект, которого нет в $clone, потому что это копия - новый другой объект и он != $original, поэтому в нем нет объекта $block
    $clone и $original это два объекта, которые равны лишь по innerHTML, но это два разных объекта.

    можно получить индекс элемента $block в наборе и работать в клоне с индексом:
    $clone.children().eq($block.index()).css('color', 'red');


    либо хранить в переменной не объект $('.block:nth-of-type(2)'), а сам селектор '.block:nth-of-type(2)'
    и соответственно работать с ним:

    const block = '.block:nth-of-type(2)';
      
    // ........
    
    $clone.find(block).css('color', 'red');
    
    $original.find(block).css('color', 'green');
    Ответ написан
    Комментировать