each(）类示例将Div Text追加到李

jQuery.each() class example Appending Div Text to Li

本文关键字：Text Div 追加 each      更新时间：2023-09-26

$EACH演示

总之，我正在获取"div class"的文本：并在控制台中打印。，我试图在"li>按钮"中添加相同的文本，但这并没有发生，不确定我哪里出了问题，

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]
    };

感谢您的帮助，谢谢

您的代码中有几个错误。classTxt是each处理程序的上下文之外的undefined，并且第二个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元素的子元素。

$('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>

$("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/

相关文章：