如何使用 jquery 遍历 HTML 页面的所有选定元素

Posted 2023-02-22

【中文标题】如何使用 jquery 遍历 HTML 页面的所有选定元素

【英文标题】：How to loop over all the selected elements of an HTML page using jquery

【发布时间】：2013-08-23 14:42:21

【问题描述】：

我正在开发一个测验应用程序，我需要在其中获取所有选定的元素或用户答案。这些元素可以是单选输入、复选框输入或文本字段。每个元素都被分配了一个 question_id 属性、 answer_id 和一个 mark 属性。我想要做的是我必须获取这些所有 question_id 、 answer_id 和 mark 属性，以便我可以计算分数，并将 question_id 和 answer_id 发送到数据库，以便我可以将相关的用户答案存储在特定问题下。我已经使用此代码在模板上呈现了测验。

$(data.quiztopics).each(function(index,element)
    $(element.questions).each(function(index,question)
        $(".quiz").append("<form name='question' class= question_"+question.id+"><input type='text' disabled value="+question.question_text+"/><br></form>");
        if(question.question_type=='NUM')
            $(question.answers).each(function(index,answer)
                $(".question_"+question.id).append("<input type='radio' question_id='+question.id+'answer_id='+answer.id +'name='answer' class=answer_"+answer.id+" mark="+answer.marks+"value="+answer.answer_text+">"+answer.answer_text+"</input>")
            );
        
        else if(question.question_type=='MCQ')
            $(question.answers).each(function(index,answer)
                $(".question_"+question.id).append("<input type='checkbox' question_id='+question.id+'answer_id='+answer.id +' name='answer' class=answer_"+answer.id+">"+answer.answer_text+"</input>")
            );
        
        else if(question.question_type=='FIB')
            $(question.answers).each(function(index,answer)
                $(".question_"+question.id).append("<input type='text' question_id='+question.id+'answer_id='+answer.id +' name='answer' class=answer_"+answer.id+">"+answer.answer_text+"</input>")
            );
        
    );
);

告诉我如何获取所选元素的属性以提交测验。

【问题讨论】：

您是否需要选择所有收音机、选中复选框和非空文本框的 jquery 选择器？

不，Ayyappan Sekar，我想选择选定的答案字段来获取 question_id 和 answer_id 属性。如果我只有这两个属性，我的任务就完成了

如果您分享这些测验列表的呈现 html，我可以帮助您

【参考方案1】：

我认为这样可以：

var questions = ;

$(".quiz :selected, .quiz :checked, .quiz input[type=text]").each(
   var $this = $(this);
   var question = $this.attr('question_id');
   questions[question] = 
       answer: $this.attr('class'),
   ;
);

【讨论】：

嘿 jcubic，我对原始问题做了一些更改，我从输入字段中删除了标记属性，因为我发现它是一个安全整体。现在我只想获取所选输入选项的 question_id 和 answer_id 属性。你的帮助很重要

【参考方案2】：

很简单，你只需要使用element.attr( attributeName )函数

JQuery documentation

一点点 JSFIddle 让你继续前进

alert("Radio Mark " + $("#one").attr('mark') + ", Radio Value " + $("#one").attr('value'));

alert("check Mark " + $("#two").attr('mark') + ", check Value " + $("#two").attr('value'));

【讨论】：

阿南德，我有多个具有动态类和 ID 的元素。任何元素都没有固定 ID 或类。

请告诉我如何遍历所选元素并获取所需属性的值

只需使用 $(.each)，与循环数据的方式相同，循环元素的方式相同。使用 JSFiddle 玩转 JQuery

【参考方案3】：

我已经解决了这个问题，方法是使用 getElementsByName('answer') 方法通过名称获取 DOM 中的所有可用元素。它返回给我一个列表然后循环遍历这个列表我检查了元素是否被检查如果它被检查我得到他们的属性。

attributes_list=new Array()
var answers=document.getElementsByName('answer');
for(i=0;i<answers.length;i++)
    if(answers[i].checked)
            question_id=answers[i].attributes['question_id'].value
            answer_id=answers[i].attributes['answer_id'].value
            attributes_list.push('que':question_id,'ans':answer_id);