Question

无论如何我得到“div class”的文本：并在控制台中打印。并且我试图在“li＆gt;按钮”中附加相同的文字，这没有发生，不确定我哪里出错了，

html：

<div class="productDescription">Red</div>
<div class="productDescription">Orange</div>
<div class="productDescription">Green</div>


<li><button>1</button></li>
<li><button>2</button></li>
<li><button>3</button></li>

JS：

//step - 1
$.each($('.productDescription'), function() { 
    var classTxt = $(this).text();
    console.log(classTxt);
});
//outputs: Red Orange Green

//step - 2 now im trying to append the text to li 
var liBtn = $(this).find('li').next('button');
    console.log("Text of Button - "+ classTxt);
    console.log(liBtn)
    for (var i = liBtn.length; i >= 0; i++) {
        liBtn[i]
    };

感谢您的帮助，谢谢

Answer 1

您的代码中存在多个错误。 classTxt undefined位于each处理程序的上下文之外，第二个this指的是window个对象，而不是.productDescription个元素。

我建议使用.append()方法的回调函数：

// cache the collection for better performance
var $p = $('.productDescription');

$('li button').append(function (index) {
    return $p.eq(index).text();
});

http://jsfiddle.net/46yo7etz/

您还可以使用.text()方法：

$('li button').text(function(index, currentTextContent) {
    // using indices for selecting 
    // the corresponding `.productDescription` element
    return currentTextContent + $p.eq(index).text();
});

请注意您的小提琴标记无效。 li元素应该是ul / ol元素的子元素。

Answer 2

$('li > button').text(function() {
  return $('.productDescription').eq( $('li > button').index( this ) ).text();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="productDescription">Red</div>
<div class="productDescription">Orange</div>
<div class="productDescription">Green</div>


<li><button>1</button></li>
<li><button>2</button></li>
<li><button>3</button></li>

Answer 3

$("button").each(function(i){
    $(this).text( $(".productDescription").eq(i).text() ); 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="productDescription">Red</div>
<div class="productDescription">Orange</div>
<div class="productDescription">Green</div>

<ul>
   <li><button>1</button></li>
   <li><button>2</button></li>
   <li><button>3</button></li>
</ul>

http://jsfiddle.net/simply_simpy/uqmpvb7e/

jQuery.each（）类示例将Div文本附加到Li

3 个答案: