jquery 在html网页中查找作为对象的属性

ee7vknir 于 2023-10-17 发布在 jQuery

关注(0)|答案(2)|浏览(109)

我有一个HTML网页包含以下标签：

<div class="user_list">
    <div onclick="dropUser(2483071,'Jack','m');" class="user_item">
        <div class="avatar"><img " src="..."> </div>
    </div>
    <div onclick="dropUser(2483075,'Sara','f');" class="user_item">
        <div class="avatar"><img " src="..."> </div>
    </div>
            ....
</div>

我想在onClick事件中创建一个包含dropUser参数的对象数组，如下所示：

array = [
    {id: 2483071, name: 'Jack' , gender: 'm'},
    {id: 2483075, name: 'Sara' , gender: 'f'}, 
    ...
]

我怎么才能得到呢。在我的方式，我想找到onClick prop ，然后将每个项目Map到数组对象。我可以通过以下方法获得元素，但我不知道如何获得onClick属性，然后是dropUser参数。

s.push($(".user_list" ).find( ".user_item" ));

for(let i = 0; i<s.length-1; i++){
  console.log($(s[i]);
}

jquery

来源：https://stackoverflow.com/questions/77201424/finding-the-properties-as-an-object-in-an-html-web-page

2条答案

按热度按时间

nfeuvbwi1#

使用jQuery，你可以很容易地做到这一点：
a）获取onclick属性值。
B）获取()之间的数据，然后将其与,拆分，使其成为数组。
c）创建一个对象，并为不同的索引分配相应的值。确保引号在赋值前被删除。
d）将此对象推到最初创建的数组中。

var arr=[];
$('.user_item').each(function(){
    var onClickDataArr = $(this).attr('onclick').match(/\(([^)]+)\)/)[1].split(',');
    userData = {
      id: parseInt(onClickDataArr[0]),
      name: onClickDataArr[1].replace(/'/g, ""),
      gender: onClickDataArr[2].replace(/'/g, "")
    };
    arr.push(userData);
});

console.log(arr);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="user_list">
    <div onclick="dropUser(2483071,'Jack','m');" class="user_item">
        <div class="avatar"><img src="..."> </div>
    </div>
    <div onclick="dropUser(2483075,'Sara','f');" class="user_item">
        <div class="avatar"><img " src="..."> </div>
    </div>
</div>

赞(0）回复(0）举报 2023-10-17

4szc88ey2#

jQuery不需要这样做。它只是一些简单的字符串解析来提取这些数据。

const userItems = document.querySelectorAll('.user_list .user_item');
const dropUsersData = [];

for(userEl of userItems){
  //get the string content of the `onclick` attribute
  const onClickStr = userEl.getAttribute('onclick');
  //remove the function name, wrapping parens, and ending semicolon
  const onClickContent = onClickStr.replace('dropUser(','').replace(');','');
  //Take the params and use the commas to separate each one into an array item
  //Then remove the quote marks around any string literals
  const onClickParams = onClickContent.split(',').map(s=>s.replace(/'/g,''));
  
  //Add the found parameters to the array
  // turning the ID into a real number and
  // saving the actual element reference (if needed)
  dropUsersData.push({
    element: userEl,
    id: parseInt(onClickParams[0], 10),
    name: onClickParams[1],
    gender: onClickParams[2]
  })
}

console.log(dropUsersData);

<div class="user_list">
    <div onclick="dropUser(2483071,'Jack','m');" class="user_item">
        <div class="avatar"><img src="..."> </div>
    </div>
    <div onclick="dropUser(2483075,'Sara','f');" class="user_item">
        <div class="avatar"><img src="..."> </div>
    </div>
</div>

赞(0）回复(0）举报 2023-10-17

我来回答

jquery 在html网页中查找作为对象的属性

2条答案

相关问题

热门标签

最新问答