Question

在页面加载时，我解析以下json数据并生成以下HTML页面

{
"status": "success",
"code": 200,
"data": [{
    "txtid": "123",     
    "name": "itemA" 
}, {
    "txtid": "456",     
    "name": "itemB" 
}],
"error": ""
}

我有以下DOM结构

<div class="col-xs-12 col-sm-9" id="Itemlist">
<div class="row" id="details">
    <div class="col-xs-12">
    <div class="panel panel-default"id="ItemInfo">
        <div class="panel-body">
            <div class="row">
            //some content                                              
                <div class="col-xs-12 col-sm-9" id="ItemContent">
                    <div class="name"></div>
                    <div class="txtid" hidden></div>
                </div>
            </div>
    </div>
    <div class="panel-footer">
    <div class="pull-right">
        <button id="Button1" type="submit" class="btn btn-success" role="button">
            Button1
        </button>
        <button id="Button2" type="submit" class="btn btn-success">Button2
        </button>
        <button id="Button3" type="submit" class="btn btn-success">Button3
        </button>
    </div>                                      
</div>
</div>

基本上，我有一个项目列表，其中包含div 详细信息（项目列表可以包含多个详细信息）。当用户点击特定详细信息div中的 Button1 时，我希望能够获取相应的属性（txtid和name）并进行一些处理。在下面的** var clickedDOMElement **给出了我点击的DOM元素，但我基本上想要转到父兄的兄弟属性（txtid和name）。

$(document).ready(function() {

$( "*", document.body ).click(function( event ) {
    event.stopPropagation();
    var domElement = $( this ).get( 0 );
    var clickedDOMElement= domElement.id;
    }
    }

Answer 1

首先，让我们看看您不知道的内容：您的HTML无效，因为您可以拥有多个div id details。 id必须是唯一的才能确保HTML的有效性，因此，重构您的HTML或生成HTML的代码，以确保不止一次出现的任何内容都是class而不是id。

现在谈谈你所问过的事情：在你展示的function中，你可以使用$(this).parent().siblings("#ItemInfo").find(".txtId")找到我们正在谈论的元素，或者只是$(this).closest(".txtId")。当然，在重构HTML之后，您需要根据您所做的更改更改我给出的代码。

Answer 2

@Rory McCrossan和@Lajos Arpad指出你的HTML中有错误。

要查找目标元素，您可以在按钮点击处理程序中使用parents和find函数：

var parentDetails = $(event.target).parents("[selector for details]");
var txtidElement = parentDetails.find('[selector for txtid element]');

使用jquery如何遍历名称，txtid属性

2 个答案: