Question

我有一个div列表。每个div都包含一个称为“数据目标”的自定义数据属性。数据目标包含数字。这些数字与顺序无关。

通过Java语言，我想为div的正确顺序创建一个列表。

例如： -如果自定义属性为“ 4321”，则设置位置1。 -如果自定义属性为“ 5849”，则设置位置2。 ...

下面您可以找到我在想的一个示例，但是它没有用。

HTML / CSS

<html>
<head>
<style> 
#main {
  width: 400px;
  height: 100px;
  border: 1px solid #000000;
  display: flex;
}

#main div {
  width: 70px;
  height: 70px;
}
</style>
</head>
<body>

<div id="main">
    <div style="background-color:green;" data-target="111222"> </div>
    <div style="background-color:blue;" data-target="222333"> </div>
</div>

<button onclick="myFunction()">Try it</button>

JAVASCRIPT


<script>


function myFunction() {

    $('[data-target="111222"]').style.order = "2";
    $('[data-target="222333"]').style.order = "1";

}


</script>

具有绿色背景的第一个div应该切换到第二个位置。我在这里找到了一个可行的示例，但是通过ElementID而不是自定义数据属性来调用它：https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_style_order

Answer 1

在浏览器控制台中，您将收到以下错误：

未捕获的TypeError：无法设置未定义的属性“顺序”

这意味着jQuery对象没有名为text file: { "name": "All new names", "url": "www.randomsite.com", "names": [] } with open('./test.txt') as f: old_product_values = json.load(f) count = 0 while True: with open('./test.txt') as f: new_product_values = json.load(f) print(new_product_values) if count == 10: no_names = True print('Declare value as No names') if not new_product_values['names']: count += 1 time.sleep(1) else: print("NEW NAMES!") print(new_product_values['names'])的属性，这就是为什么它像style那样对待它。如果要修改jQuery对象的css属性，请使用 .css() 。您的代码应如下所示：

undefined

附加了 Fiddle 。

Answer 2

尝试一下：

function myFunction() {

    document.querySelector('div[data-target="111222"]').style.order = "2";
    document.querySelector('div[data-target="222333"]').style.order = "1";

}

<html>
<head>
<style> 
#main {
  width: 400px;
  height: 100px;
  border: 1px solid #000000;
  display: flex;
}

#main div {
  width: 70px;
  height: 70px;
}
</style>
</head>
<body>

<div id="main">
    <div style="background-color:green;" data-target="111222"> </div>
    <div style="background-color:blue;" data-target="222333"> </div>
</div>

<button onclick="myFunction()">Try it</button>

通过javascript

2 个答案: