将一个属性复制到JQuery中一组子项的同一子项中的另一个属性

Question

Wow, so that's a mouthful. I've been struggling with this as I'm still a newbie with JQuery selectors. Any help with this will be greatly appreciated. I have a situation where I'm selecting a sub-set of child div (class='B') from a parent div (id='A') using .children() and .slice() . Furthermore, I need to copy the value of longdesc attribute of each grandchild div (class='C') to its div content. I was thinking of something like below, but I don't know how to reference the correct grandchild div when trying to obtain the value of the longdesc . Maybe there's a better approach to this? HELP!

HTML:

<div id="A">
    <div class="B">
        <div class="C" longdesc="value1"></div>
    </div>
    <div class="B">
        <div class="C" longdesc="value2"></div> 
    </div>
    <div class="B">
        <div class="C" longdesc="value3"></div> 
    </div>
    <div class="B">
        <div class="C" longdesc="value4"></div> 
    </div>
</div>

JQuery:

$start = 0;
$end = 2;

$('#A').children().slice($start, $end).find('.C').html("??value of longdesc??");

Output:

<div id="A">
    <div class="B">
        <div class="C" longdesc="value1">value1</div>
    </div>
    <div class="B">
        <div class="C" longdesc="value2">value2</div> 
    </div>
    <div class="B">
        <div class="C" longdesc="value3">value3</div> 
    </div>
    <div class="B">
        <div class="C" longdesc="4"></div> 
    </div>
</div>

Many thanks in advance!

Answer 1

Use the version of .html() that take a function as parameter ..

$('#A').children().slice($start, $end+1).find('.C').html(function(){
    return $(this).attr('longdesc');
});

Demo at http://jsfiddle.net/aaFt9/1/

---

You also need to use $end + 1 to match the value3 because slice second argument is up-to but not including it ( see Array.prototype.slice() docs at MDN )

---

Additionally if that is your real html structure, you can skip the .children() and find the .C elements directly..

$('#A').find('.C').slice($start, $end+1).html(function(){
    return $(this).attr('longdesc');
});

Demo at http://jsfiddle.net/aaFt9/2/

Answer 2

Try

$(".C").html(function () {
    return $(this).attr("longdesc")
});

JSFIDDLE

---

EDIT : re-reading the question, you could try

var $end = 2;
$(".C").each(function (i) {
    i <= $end ? $(this).html(function () {
        return $(this).attr("longdesc")
    }) : null;
});

JSFIDDLE

Answer 3

$("#A").find(".B").children().each(function(){
   $(this).html($(this).attr('longdesc')); 
});

Fitting in the .slice() should not be a problem, wherever you want.