在添加到文檔 DOM 之前，如何在動態創建的元素上通過 Jquery 更改 css

Question

我有這個動態創建的元素，通過第 3 方庫 (jsondiffpatch.formatters.html.format()) 創建。

在添加到文檔 DOM 之前，我想做一些 css 和內容更改。

我嘗試這樣做但失敗了：

function transformDelta(deltaHtml: any) {
  $(deltaHtml)
    .find(".jsondiffpatch-delta > ul > li")
    .each(function () {
      console.log($(this).text());
    });
  return deltaHtml;
}

這是怎么做的？

附加代碼：

顯示 json 變化的按鈕

<ChangesModalButton
  variant="primary"
  getMatrixDelta={() => {
    const delta = diffpatcher.diff(orig, cur);
    const deltaHtml = jsondiffpatch.formatters.html.format(delta);
    const Container = (
        <div dangerouslySetInnerHTML={{ __html: deltaHtml }} />
      );
    return Container;
  }}
/>

顯示模式的 Button 定義

export function ChangesModalButton(props: any) {
  const [modalShow, setModalShow] = React.useState(false);
  const [matrixDelta, setMatrixDelta] = React.useState<any>(null);

  return (
    <React.Fragment>
      <ChangesModal
        matrixDelta={matrixDelta}
      />

      <Button
        onClick={() => {
          setMatrixDelta(props.getMatrixDelta());
          setModalShow(true);
        }}
      >
        <img src={seeChangesMatrixImg} alt="" />
      </Button>
    </React.Fragment>
  );
}

模態定義

class ChangesModal extends Component<any> {
  render() {
    return (
      <Modal
      >
        <Modal.Body>{this.props.matrixDelta? this.props.matrixDelta: "No Changes"}</Modal.Body>           
      </Modal>
    );
  }
}

Answer 1

首先，在渲染 dom 之前，您不能進行 css 更改。 渲染 Dom 后，您可以進行 css 更改。

如果您要更改 css 中的元素顏色，假設元素是 p1 然后

 $(p1).css('color','blue');
 $('#myId').css('color','blue');//to target id let say Id : myId
 $('.myClass').css('color','blue');//to target class let say css: myClass

或者改變它的內容

 $(p1).html("this is new text added dynamically with JQuery");
 $('#myId').html("this is new text added dynamically with JQuery");//to target id let say Id : myId
 $('.myClass').html("this is new text added dynamically with JQuery");//to target class let say css: myClass

Answer 2

只需使用 css 方法https://api.jquery.com/css/如下

function transformDelta(deltaHtml: any) {
  $(deltaHtml)
    .find(".jsondiffpatch-delta > ul > li")
    .each(function () {
      $(this).css({"color": "red"})
      console.log($(this).text());
    });
  return deltaHtml;
}