Question

我有一个对象列表，我循环遍历它，并使用直接HTML <label>向用户显示该列表中的值到我的免费标记中。

对于每个循环，我渲染一个按钮，该按钮应该采用先前渲染的属性。

我执行以下操作：

[#list myObjectList as object]
<label>  ${object.parameterA} </label>
<label>  ${object.parameterB} </label>
<input type="button" id="[@spring.url '/myUrl'/]"
                     class="testBtn btn testPassParameter"
                     value="Test the method" 
</input>
[/#list]

$('.testPassParameter').each(function() {
        $(this).click(function(event) {
            //Here I need to do some sort of magic to
            //fetch the value of  {object.parameterA} 
            }
     }
});

我尝试使用div并将动态值作为ID分配给该div，而不是使用<label> 然后我可以使用getElementById()从该div获取值。但是，当我循环遍历列表并且需要特定的属性值时，如何获取元素ID？

Answer 1

将一个类添加到参数A元素：

<label class="parameterA">  ${object.parameterA} </label>

将您的JS更改为：

$('.testPassParameter').click(function() {
    var parameterA = $(this).prev(".parameterA:eq(0)").text();
});

Answer 2

在点击方法中，使用$.prev访问之前的兄弟。

$('.testPassParameter').each(function() {

        $(this).click(function(event) {
            //Here I need to do some sort of magic to
            //fetch the value of  {object.parameterA}
            console.log($(this).prev().text()); // access text of label
         });

});

http://jsfiddle.net/EjebG/2

Answer 3

我首先想到解决这个问题的方法：

$('.testJQuery').each(function() {
    $(this).click(function(event) {
        var values = {}; // creating an object

        // looking at all table rows except for the one containing the button
        $('tr').not($(this).closest('tr')).each(
            function(){
                // the first 'label' is the label-text
                l = $(this).find('label:eq(0)').text();

                // the second 'label' is the value (for some reason)
                v = $(this).find('label:eq(1)').text();

                values[l] = v;
            });

        // using the console to allow for exploration of the returned object
        console.log(values);

        // just to prevent submission
        return false;
    });
});

JS Fiddle demo

这种方法有点笨拙，因为它必须查看每个表行，然后查找label s。在您的完成版本中，每个表格会有一个标签值对吗？或倍数？

如果每张桌子有多对，你想要发生什么？

顺便提一下，label用于唯一标识表单中的关联输入元素;如果您没有关联的input，则表示您使用的label不正确。如果您使用，请改为：

<td class="labelValuePairs">
    <span class="label">ParamB:</span>
    <span class="value">ParamB value</span>
</td>

使用起来稍微容易一些，例如：

$('.testJQuery').each(function() {
    $(this).click(function(event) {

        var table = $(this).closest('table'),
            labelText = table.find('.labelValuePairs span.label').text(),
            valueText = table.find('.labelValuePairs span.value').text();

        alert(labelText + ' ' + valueText);

        return false;
    });
});

JS Fiddle demo

值得注意的是，您不需要使用$('.testJQuery')迭代each()元素，click()方法将应用于选择器返回的所有元素。以上，可以简化为：

$('.testJQuery').click(function(event) {

    var table = $(this).closest('table'),
        labelText = table.find('.labelValuePairs span.label').text(),
        valueText = table.find('.labelValuePairs span.value').text();

    alert(labelText + ' ' + valueText);

    return false;
});

JS Fiddle demo

将参数传递给JQuery方法

3 个答案: