以 jQuery 获取父元素的属性值

在 jQuery 中，要获取父元素的属性值，我们可以使用 .parent() 和 .attr() 方法。

$(this).parent().attr('属性名称');

其中，$(this) 代表当前元素，.parent() 方法获取父元素，.attr() 方法获取属性值，并传入属性名称作为参数。

如果我们要获取多个父元素的属性值，可以使用 .parents() 方法：

$(this).parents().attr('属性名称');

.parents() 方法会获取当前元素的所有祖先元素（即父元素、祖父元素、曾祖元素等），并返回一个集合对象。我们在集合对象上调用 .attr() 方法，可以获取所有元素的相同属性名称的属性值，返回一个数组。

下面的示例演示了如何使用 .parent() 和 .attr() 方法获取父元素的属性值：

<ul>
  <li data-id="1">Item 1</li>
  <li data-id="2">Item 2</li>
  <li data-id="3">Item 3</li>
</ul>

$(document).ready(function(){
  $('li').click(function(){
    var parentId = $(this).parent().attr('id');
    console.log('Parent ID:', parentId);
    
    var parentIds = $(this).parents().attr('id');
    console.log('Parent IDs:', parentIds);
  });
});

上述代码将会输出：

Parent ID: null
Parent IDs: null

因为 ul 元素没有 id 属性，所以返回 null。如果为 ul 元素添加 id 属性：

<ul id="my-list">
  <li data-id="1">Item 1</li>
  <li data-id="2">Item 2</li>
  <li data-id="3">Item 3</li>
</ul>

则会输出：

Parent ID: my-list
Parent IDs: my-list

返回的结果为字符串数组，如果需要单独访问其中一个元素的属性值，可以通过索引访问：

var parentIds = $(this).parents().attr('id');
var firstParentId = parentIds[0];
console.log('First Parent ID:', firstParentId);

上述代码将会输出：

First Parent ID: my-list

以上就是以 jQuery 获取父元素的属性值的方法。