$(this).insertAfter(target_div);

解法: How to move an element after another element using JS or jquery?
https://stackoverflow.com/questions/14549125/how-to-move-an-element-after-another-element-using-js-or-jquery

舉例:

I would like to move one DIV element beside another, it is normally like this:

<div class="box-content-top">
 <div class="box-related-product-top">
  <div>  

    <div class="price">
      ...   
    </div>              
    <div class="image">
     ...
    </div>
    <div class="name">
     ...
    </div>
    <div class="cart">
     ...
    </div>


   <div>  

    <div class="price">
      ...   
    </div>            
    <div class="image">
     ...
    </div>
    <div class="name">
     ...
    </div>
    <div class="cart">
     ...
    </div>

  </div>
</div>

I want to change the position of the div with the class .price to be after the .name class, to look like this:

<div class="box-content-top">
 <div class="box-related-product-top">
  <div>  

    <div class="image">
     ...
    </div>
    <div class="name">
     ...
    </div>
     <div class="price"> // HERE
      ...   
    </div> 
    <div class="cart">
     ...
    </div>


   <div>  

    <div class="image">
     ...
    </div>
    <div class="name">
     ...
    </div>
    <div class="price"> // HERE
      ...   
    </div> 
    <div class="cart">
     ...
    </div>

  </div>
</div>

解法:

You can use insertAfter to move the element. Docs

$('.price').each(function() {
    $(this).insertAfter($(this).parent().find('.name'));
});

這個解法有一個限制，就是在搬家的時候，無法把自己的孫子節點搬成自己小孩節點，會顯得示錯誤訊息：

jquery-3.6.3.min.js:2 Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': The new child element contains the parent.

範例程式:

$("iframe.punch-present-iframe").each(function() {
    var $iframe = $(this), 
        $contents = $iframe.contents();
        $font_style_block = $contents.find('#MaxChangeFontCss');
        if($font_style_block.length==0) {
            // task-1
        } else {
            // task-2
        }
});

今天要學的是把 array 裡的值, 變成 <select> 裡的 option.
https://stackoverflow.com/questions/740195/adding-options-to-a-select-using-jquery

Personally, I prefer this syntax for appending options:

$('#mySelect').append($('<option>', {
    value: 1,
    text: 'My option'
}));

If you’re adding options from a collection of items, you can do the following:

$.each(items, function (i, item) {
    $('#mySelect').append($('<option>', { 
        value: item.value,
        text : item.text 
    }));
});

$.each(selectValues, function(key, value) {   
     $('#mySelect')
         .append($("<option></option>")
                    .attr("value", key)
                    .text(value)); 
});

要實作這個功能, 要先能讀到 checkbox 是否有勾, jquery 語法:

 if($("#clickAll").prop("checked")) {...}

要做到這個功能, 還需要對 cookie 做存取, 提供二個簡單的 function:

function getCookie(cname) {
  let name = cname + "=";
  let decodedCookie = decodeURIComponent(document.cookie);
  let ca = decodedCookie.split(';');
  for(let i = 0; i <ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

function setCookie(cname, cvalue, exdays) {
  const d = new Date();
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  let expires = "expires="+ d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

與前一篇文章加起來, 完整的範例就是:

  let do_signin_flag = true;
  $("#fail-message").html("");
  if($("#account").val().length==0){
    $("#fail-message").html("Account is required.");
    $("#account").focus();
    do_signin_flag=false;
  } else {
    if($("#remember-me").prop("checked")) {
      setCookie("account",$("#account").val());
    }
  }

相關文章

jquery check textbox empty
https://stackoverflow.max-everyday.com/2023/02/jquery-check-textbox-empty/

if (inp.val().length > 0) {
    // do something
}

if you want anything more complicated, consider regex or use the validation plugin which takes care of this for you.

在檢查到登入失敗, 或無填值, 有二種處理方式, 一個是彈 modal dialog, 一個是用 danger text, 如果不是太重大的提醒, 應該使用 danger text, 使用方法:

<div class="text-danger" id='fail-message'>your message here.</div>

我的登入 script:

  let do_signin_flag = true;
  $("#fail-message").html("");
  if($("#account").val().length==0){
    $("#fail-message").html("Account is required.");
    $("#account").focus();
    do_signin_flag=false;
  }

我使用的範例:
https://getbootstrap.com/docs/5.3/examples/sign-in/

How to Set the Value of Input Text Box using jQuery

範例:

<script>
$(document).ready(function(){
    $("#myInput").val("https://");
});
</script>

You can use append (to add at last position of parent) or prepend (to add at fist position of parent):

$('#parent').append('<div>hello</div>');    
// or
$('<div>hello</div>').appendTo('#parent');

Alternatively, you can use the .html() or .add() as mentioned.

div = $("<div>").html("Loading......");
$("body").prepend(div);    

Technically $('<div></div>') will ‘create’ a div element (or more specifically a DIV DOM element) but won’t add it to your HTML document. You will then need to use that in combination with the other answers to actually do anything useful with it (such as using the append() method or such like).

The manipulation documentation gives you all the various options on how to add new elements.

d = document.createElement('div');
$(d).addClass(classname)
    .html(text)
    .appendTo($("#myDiv"))
.click(function () {
    $(this).remove();
})
);

Example 2:
https://stackoverflow.com/questions/867916/creating-a-div-element-in-jquery

If you are using Jquery > 1.4, you are best of with Ian’s answer. Otherwise, I would use this method:

This is very similar to celoron’s answer, but I don’t know why they used document.createElement instead of Jquery notation.

$("body").append(function(){
        return $("<div/>").html("I'm a freshly created div. I also contain some Ps!")
            .attr("id","myDivId")
            .addClass("myDivClass")
            .css("border", "solid")                 
            .append($("<p/>").html("I think, therefore I am."))
            .append($("<p/>").html("The die is cast."))
});

//Some style, for better demonstration if you want to try it out. Don't use this approach for actual design and layout!
$("body").append($("<style/>").html("p{background-color:blue;}div{background-color:yellow;}div>p{color:white;}"));

I also think using append() with a callback function is in this case more readable, because you now immediately that something is going to be appended to the body. But that is a matter of taste, as always when writing any code or text.

In general, use as less HTML as possible in JQuery code, since this is mostly spaghetti code. It is error prone and hard to maintain, because the HTML-String can easily contain typos. Also, it mixes a markup language (HTML) with a programming language (Javascript/Jquery), which is usually a bad Idea.

• addClass() – Adds one or more classes to the selected elements
• removeClass() – Removes one or more classes from the selected elements
• toggleClass() – Toggles between adding/removing classes from the selected elements
• css() – Sets or returns the style attribute

新增 class 範例:

$(“button”).click(function(){
  $(“div”).addClass(“important”);
});

移除 class 範例:

$(“button”).click(function(){
  $(“div”).removeClass(“blue”);
});

比較常見的是用切換某一個屬性, 可以用 toggle

$(“button”).click(function(){
  $(“h1, h2, p”).toggleClass(“blue”);
});