Jquery分配第二个子属性

Jquery assign second child attribute

本文关键字:属性 第二个 分配 Jquery      更新时间:2023-09-26

是否有方法分配嵌套的div属性与变量?像

<div>
  <div>
    123456
  </div>
</div>
成为

<div>
  <div sectionid="123">
    123456
  </div>
</div>

上面的组件将由JavaScript创建。

我试过这样做,但是没有成功。

var a = $('<div><div>123456</div></div>');
a.eq(":nth-child(2)").attr("sectionid", "123");

试试这段代码。

//FOR DOM HTML
console.log("FOR DOM HTML");
//1st way
$('#input > div').find('div').attr("sectionid","123");
console.log($('#input').html());
//2nd way
$('#input > div > div').attr("sectionid","321");
console.log($('#input').html());
//JS HTML
console.log("FOR JS OBJECT");
var input = $('<div><div>123456</div></div>');
//1st way
input.eq(0).children().attr('sectionid', '456');
console.log(input[0].outerHTML);
var input = $('<div><div>123456</div></div>');
//2nd way
$(input[0]).children().attr('sectionid', '789');
console.log(input[0].outerHTML);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="input">
<div>
  <div>
    123456
  </div>
</div>
</div>

nth-child(2)替换父元素的第二个子元素。div不是这种情况,它是父div的第一个元素。

.eq在特定索引处查找元素。它不是传递选择器的地方。

子选择器>将找到一个子元素,即div>div将找到一个div,该div是div的直接子元素。

请注意,您提供的代码$('<div></div>123456<div></div>');并没有创建像您粘贴的那样的DOM树。

更新,现在已经编辑了代码,a的值是一个带子div的div。由于a.find将在a中执行搜索,您不必使用子选择器,但可以立即找到div:

a.find('div')

将属性应用于子元素。没有复杂的'find', eq()等

var a = $('<div><div>123456</div></div>');
a.children().attr('sectionid', '123');
$('body').append(a);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

你为什么不把它放在首位呢?不清楚是否稍后添加!

$(document).ready(function() {
  var sectionid = "123";
  var a = $('<div><div sectionid="' + sectionid + '">123456</div></div>');
  $('body').append(a);
});
div[sectionid]{
  color: red;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

试试这个-我在代码中添加了注释来解释正在发生的事情。

检查元素是否添加了属性

var a = $('<div><div>123456</div></div>'); // change this to match the structure you want
a.children() // .children gets the direct descendant (which should be the nested div
  .eq(0) // gets the first in the array that is returned (if there are multiple direct descendents) - it is a 0 based index selector
  .attr('sectionid', '123');
$('body').append(a)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

关于.children()的更多信息

关于.eq()的更多信息

试一试:

$(document).ready(function(){
    $("div").eq(1).attr("sectionid","123");
})