javascript - 带有 .Ajax() / childNodes 的 Javascript 选择器

Question

<ul id="feature-deals" class="list-products">
    <li>
        <a href="#" class="pname">pink</a>
        <span id="uid">021454</span>
        <span id="qty">1</span>
    </li><br>
    <li>
        <a href="#" class="pname">yellow</a>
        <span id="uid">012447</span>
        <span id="qty">1</span>
    </li><br>
    <li>
        <a href="#" class="pname">violet</a>
        <span id="uid">0127841</span>
        <span id="qty">1</span>
    </li><br>
</ul>

js脚本

$("#feature-deals li").click(function () {
    $.ajax({            
        url: "phpPage.php",
        type: "POST",
        data: ({
            productId: $(????).text(),
            productType: $(????).text(),
            productQty: $(???).text() 
        }),
        success : function(data){                                                           
            totalItemCart();
            $("#div1").html(data);
        }
    })


    .error(function(){
        alert('error... ohh no!');
    });

});

如何从选定的 li 中获取整个 li 内容（pname、uid、qty）并通过 .ajax() 传递

这是我想做的事情：

li content --> 获取所有信息(pname,uid,qty) --> 放到ajax的数据中 --> 传给phpPage.php --> 返回结果

Answer 1

重复id在html中无效，我建议使用类而不是id，然后选择具有特定类的li的后代

<ul id="feature-deals" class="list-products">
    <li>
        <a href="#" class="pname">pink</a>
        <span class="uid">021454</span>
        <span class="qty">1</span>
    </li><br>
    <li>
        <a href="#" class="pname">yellow</a>
        <span class="uid">012447</span>
        <span class="qty">1</span>
    </li><br>
    <li>
        <a href="#" class="pname">violet</a>
        <span class="uid">0127841</span>
        <span class="qty">1</span>
    </li><br>
</ul>

$("#feature-deals li").click(function () {
    $.ajax({            
        url: "phpPage.php",
        type: "POST",
        data: ({
            productId: $('.uid',this).text(),
            productType: $('.pname',this).text(),
            productQty: $('.qty',this).text() 
        }),
        success : function(data){                                                           
            totalItemCart();
            $("#div1").html(data);
        }
    })


    .error(function(){
        alert('error... ohh no!');
    });

});