jquery 相关问题

jQuery是一个Javascript库，考虑添加Javascript标记。 jQuery是一个流行的跨浏览器JavaScript库，它通过最小化浏览器之间的差异来促进文档对象模型（DOM）遍历，事件处理，动画和AJAX交互。标记为jquery的问题应该与jquery相关，因此有问题的代码应该使用jquery，并且至少需要jquery与用法相关的元素。

使用 jQuery UI sortable 对多个表行进行排序

我正在使用 jQuery UI 附带的可排序函数来对表行重新排序。它工作正常，这里是一个 JSFiddle，下面是我的 HTML 和 JS ... 我正在使用 jQuery UI 附带的可排序函数来对表行重新排序。它工作正常，这里是一个 JSFiddle，下面是我的 HTML 和 JS <table style="width: 100%;"> <thead> <tr> <th>ID</th> <th>Fruit</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Apple</td> </tr> <tr> <td>2</td> <td>Pear</td> </tr> <tr class="sticky"> <td>3</td> <td>Banana</td> </tr> <tr> <td>4</td> <td>Raspberry</td> </tr> <tr> <td>5</td> <td>Mango</td> </tr> </tbody> </table> $(function(){ $("table tbody").sortable(); }); 但是我希望能够同时拖动多行。基本上，当您拖动 tr 时，如果其正下方的 tr 具有 sticky 类，则需要将 tr 与其一起拖动。因此，在我的示例中，任何时候您想要拖动并重新排序“Pear”行，下面的“Banana”行都会随之移动。我认为可以使用辅助函数来做到这一点，但我真的不知道从哪里开始。如果有人可以建议我最好的方法并为我指明正确的方向，那就太好了。您可以使用 start 事件检查下一个 tr 的 class 是否为 sticky 并将其插入到 stop 事件上拖动的项目之后。我正在使用 css 方法来为“粘性”项目设置动画。 $(function() { var $draggedItem, $stickyItem, itemWidth, itemHeight; $("table tbody").sortable({ start: function(event, ui) { $draggedItem = $(ui.item[0]); //Store the constant width and height values in variables. itemWidth = $draggedItem.width(); itemHeight = $draggedItem.height(); //next is called twice because a hidden "tr" is added when sorting. var $nextChild = $(ui.item[0]).next().next(); if ($nextChild.hasClass('sticky')) { $stickyItem = $nextChild; } else { $stickyItem = undefined; } }, sort: function() { if ($stickyItem != undefined) { //Set the css to match the dragged item's css, with the exception of "top", which includes an offset. $stickyItem.css({ "z-index": $draggedItem.css('z-index'), "position": "absolute", "width": itemWidth, "height": itemHeight, "left": $draggedItem.css('left'), "top": $draggedItem.position().top + itemHeight, }); } }, stop: function() { if ($stickyItem != undefined) { $stickyItem.insertAfter($draggedItem); //Remove the style attribute to reset to thed default style. $stickyItem.removeAttr('style'); } } }); }); 小提琴演示注意：如果存在粘性项目，您可以通过仅绑定 sort 和 stop 事件来进一步改进上述内容。对于那些想要防止在粘性行与其上方的行之间插入行的人，这里是 Yass 解决方案的稍微修改版本： $(function () { let $draggedItem, $stickyItem, itemWidth, itemHeight, cancelSortable; $("table tbody").sortable({ start: function (event, ui) { $draggedItem = $(ui.item[0]); //Store the constant width and height values in variables. itemWidth = $draggedItem.width(); itemHeight = $draggedItem.height(); //next is called twice because a hidden "tr" is added when sorting. let $nextChild = $(ui.item[0]).next().next(); if ($nextChild.hasClass('sticky')) { $stickyItem = $nextChild; } else { $stickyItem = undefined; } }, sort: function (event, ui) { if ($stickyItem !== undefined) { //Set the css to match the dragged item's css, with the exception of "top", which includes an offset. $stickyItem.css({ "z-index": $draggedItem.css('z-index'), "position": "absolute", "width": itemWidth, "height": itemHeight, "left": $draggedItem.css('left'), "top": $draggedItem.position().top + itemHeight, }); } if (ui.placeholder.next() !== undefined && ui.placeholder.next().hasClass("sticky")) { ui.placeholder.hide(); cancelSortable = true; } else { ui.placeholder.show(); cancelSortable = false; } }, stop: function () { if (cancelSortable) { $(this).sortable("cancel"); } if ($stickyItem !== undefined) { $stickyItem.insertAfter($draggedItem); //Remove the style attribute to reset to the default style. $stickyItem.removeAttr('style'); } } }); }); 可对两行以上进行分组的可排序选项（编辑连续两次使用 next() 的“start”参数中的行）： let $nextChildren = $(ui.item[0]).nextAll(".sticky:visible").not(".ui-sortable-placeholder"); if ($(ui.item[0]).next().next().hasClass('sticky')) { $stickyItem = $nextChildren; } 此代码获取所有具有“粘性”类的下一行，即使它们之间存在没有该类的行。

javascript jquery jquery-ui

回答 3 投票 0

javascript可以像windows一样排序吗？

我需要一种 Javascript 中的方法来像 Windows 中那样对字符串进行排序，但这似乎是不可能的。 Windows 资源管理器排序如下： 1.jpg - 2.jpg - 3.jpg - .... 而 Javascript 的排序方式如下： 1.jpg - 1...

javascript jquery file sorting web

回答 5 投票 0

为什么<img>源路径仅适用于导入和url？

我正在尝试创建一个简单的反应站点。但在创建的过程中，我就遇到了这个问题。情况图片加载正常...

javascript html jquery css reactjs

回答 2 投票 0

100vh 在 Safari iOS“单选项卡”配置上无法正常工作

我使用 Angular 将 iframe 加载到 html 中。在我的 ts 上我有 ngOnInit(): 无效...

jquery css iframe height mobile-safari

回答 1 投票 0

在jquery、css中打开div无法实现平滑

所以我正在为我的计算器编写一个向下滑动的动画，我已经阅读了网络上的所有资源，但似乎仍然无法实现div上的平滑度。一些内容滑出，但一半和

html jquery css animation

回答 1 投票 0

jQuery - 如何查找 ID 属性中带有方括号的元素？ [重复]

我正在使用 jQuery，我有这个元素：当我尝试得到它时...

javascript jquery unicode

回答 3 投票 0

在jquery中使用overflow=hidden获取窗口高度

我有一个全屏网络应用程序，永远不应该滚动，所以我设置： $("body").css("溢出", "隐藏"); 但是，当我添加调整大小侦听器时： $(窗口).调整大小(函数(){ 控制台.log(...

jquery html css

回答 2 投票 0

使用 JavaScript 中的索引获取 Spring 模型属性列表元素

很抱歉，如果在其他地方有人问过这个问题，但我环顾四周，找到了一些答案，但不是一个完整的例子，我仍然对此表示怀疑。所以，我添加了一个自动填充列表

java javascript jquery spring spring-mvc

回答 4 投票 0

Spring Boot 和 Thymeleaf 中的 DB 自动完成 JQuery

这是我的模板： <div> </div> <p>这是我的模板：</p> <pre><code>  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-3.7.1.js"></script> <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script> <script src="https://code.jquery.com/jquery-3.7.1.slim.min.js" integrity="sha256-kmHvs0B+OpCW5GVHUNjv9rOmY0IvSIRcf7zGUDTDQM8=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.11.8/umd/popper.min.js"></script> <script type="text/javascript" > $( function() { $( "#hint" ).autocomplete({ source: "https://api.nunyito.com/api/geoDetailsForWeb", minLength: 3, select: function( event, ui ) { this.value = ui.item.value; console.log( "Selected: " + ui.item.value + " aka " + ui.item.id ); return false; } }); } ); </script> .. <form th:action="@{/alarmNotification/save}" th:object="${data}" method="post"> <p > <label for="title"> </label><input id="title" type="text" th:field="*{email}" placeholder="Title"/> <label for="hint"></label><input type="text" id="hint" name="hint" /> </p> </form> .. </code></pre> <p>但是我有这个错误：</p> <p><a href="https://i.stack.imgur.com/rUVYM.png" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL3JVVllNLnBuZw==" alt=""/></a></p> </question> <answer tick="false" vote="0"> <p>更改此：</p> <pre><code><form th:action="@{/alarmNotification/save}" th:object="${data}" method="post"> <p > <label for="title"> </label><input id="title" type="text" th:field="*{email}" placeholder="Title"/> <label for="hint"></label><input type="text" id="hint" name="hint" /> </p> </form> </code></pre> <p>对此：</p> <pre><code><form th:action="@{/alarmNotification/save}" th:object="${data}" method="post"> <div> <label for="title">Title</label> <input id="title" name="title" th:field="*{email}" placeholder="Title" autocomplete="email" /> <label for="hint">Hint</label> <input id="hint" name="hint" /> </div> </form> </code></pre> <p>如果您希望自动完成功能不自动填充，请改为 <pre><code>autocomplete="off"</code></pre>。</p> <p>如果您不希望表单有标签，请完全删除标签并为每个标签添加一个 aria-label <pre><code><input></code></pre>:</p> <pre><code><input aria-label="Title" ... /> </code></pre> </answer> </body></html>

javascript html jquery jquery-ui spring-thymeleaf

回答 0 投票 0

如何使用Jquery和ajax从JSON文件中检索数据？

今天发生了一件奇怪的事情：我试图使用 jquery 和 ajax 从 JSON 文件中检索一些数据，并将这些数据显示在网页上。这个例子是我在网上找到的，工作...

jquery json ajax

回答 6 投票 0

想要简化使用jquery在多个文件中显示一些html

我在html文件中有jQuery来在网页上显示标签行。我想在标头中放置一行代码，这样我就不必复制很多行 jQuery 代码。我将附上一份工作副本...

jquery

回答 0 投票 0

如何将所有子元素（及其子元素）的位置更改为绝对位置，同时仍保留其原始位置？

我正在开发某种文档编辑器，基本上用户上传 PDF => 服务器转换为 html => 前端将 html 渲染到编辑器 => 用户编辑 => 服务器将 html 转换回 pdf 我...

javascript html jquery css frontend

回答 1 投票 0

如何根据引导卡中的宽度和高度调整图像？

我想在卡片中给出图像的宽度和高度（300px;300px;）：我想在卡片中给出图像的宽度和高度（300px;300px;）：  <div class="card" style="width: 35rem;"> <img class="card-img-top" src="/demo/img/1.jpeg" alt="Card image cap" style="width:35rem;height:20rem;"/> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div>  产量缩水了：如果我删除下面的代码行，那么图像会很长但不会缩小： style="width:35rem;height:20rem;" 我已经尝试过： object-fit:cover;(Check all properties like fill, scale-down) 还尝试了一些CSS： <style> .clsAutofit{ height:300px; width:300px; } .clsImg{ max-width:100%; max-height:100%; } </style> <div class="clsAutofit"> <img src="/demo/img/1.jpeg" class="clsImg" /> </div>  我还尝试了一些属性： <style> img.one { display: block; object-fit: contain; max-width:500px; max-height:280px; width: auto; height: auto; } img.two { object-fit: contain; width: 535px;; height: 535px; } .box { width: 30%; height: 200px; border: 5px dashed #f7a239; } .containerTY { width: 60%; height: 500px; } .containerTYZ { max-width: 100%; } .thumbnail { width: 500px; height: 400px; } .img4R { width: 100%; height: auto; max-width: 50vw; } </style> 我尝试过，但还没成功。任何想法或建议都欢迎。你的方法没问题。问题是，引导类属性往往有!important。因此将自定义 style.css 放在 bootstrap.css 下，这样它比 bs 具有更高的优先级，然后使用： .my-image{ height : 300px !important; width: 300px !important } 将图像与类.my-image绑定，清除内联CSS样式，然后检查这一点。 .clsImg{ max-width:100%; width: 100%; height: auto; object-fit:cover; } 使用 img-fluid 表示图像，您还可以使用 w-25 w-50 w-100 表示 lg、md、sm 等设备 @media (min-width: 768px) { .w-md-50{width:50% !important;} } @media (min-width: 992px) { .w-lg-75{width:75% !important;} } <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <div class="container"> <div class="row pt-5 w-100 mx-auto">  <div class="col-lg-4 col-md-6 col-sm-6 mb-4"> <div class="card p-4"> <div class="row"> <div class="col-6"> <img class="card-img-top img-fluid w-lg-75 w-md-50 w-100 text-center" src="https://i.ibb.co/Xyk1kJy/1-1.jpg" alt="Card image cap"/> </div> <div class="col-12"> <div class="card-body px-0 pb-0"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </div> </div> </div>  <div class="col-lg-4 col-md-6 col-sm-6 mb-4"> <div class="card p-4"> <div class="row"> <div class="col-6"> <img class="card-img-top img-fluid w-lg-75 w-md-50 w-100 text-center" src="https://i.ibb.co/Xyk1kJy/1-1.jpg" alt="Card image cap"/> </div> <div class="col-12"> <div class="card-body px-0 pb-0"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </div> </div> </div>   <div class="col-lg-4 col-md-6 col-sm-6 mb-4"> <div class="card p-4"> <div class="row"> <div class="col-6"> <img class="card-img-top img-fluid w-lg-75 w-md-50 w-100 text-center" src="https://i.ibb.co/Xyk1kJy/1-1.jpg" alt="Card image cap"/> </div> <div class="col-12"> <div class="card-body px-0 pb-0"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </div> </div> </div>  </div> </div>

html jquery css twitter-bootstrap bootstrap-4

回答 3 投票 0

从 AJAX 响应中获取唯一对象

我正在尝试从 AJAX 响应返回的对象数组中获取唯一的对象。我在这里发现了类似的东西，但我还有一个额外的条件，不知道如何解决它。党...

javascript jquery unique

回答 1 投票 0

Jquery Migrate 到底修改了什么？已弃用/删除的代码？修改代码？

我正在开发一个使用 jQuery 2.2.3 的项目，我注意到 jqelem.outerHeight() 函数在此版本中返回 null。出于测试目的，我已将 jQuery Migrate 3.3.0 添加到我的 co...

javascript jquery jquery-migrate

回答 1 投票 0

如何在 jQuery UI Slider 设置 3 种不同的颜色

我正在使用这个 UI 滑块。我必须用 3 种不同的颜色来制作这个滑块：手柄颜色句柄的前一部分句柄的下一部分像这样的东西：到目前为止，我已经可以把手柄了...