如何使用jQuery在div onclick属性中获取字符串？

Question

I have a banner which is something like this:

<ul id="carousel">
   <li id="item1">
      <div onclick="window.open('mylinkhere.com,'_blank')" style="cursor:pointer;margin-left:-436px;width:996px;height:100%">
      </div>
   </li> 
   <li id="item2">
      <div onclick="window.open('myotherlinkhere.com,'_blank')" style="cursor:pointer;margin-left:-436px;width:996px;height:100%">
      </div>
   </li> 
</ul>

I need to access the links written in onclick attribute ie mylinkhere.com

I tried

var banners = $($("#carousel")[0]).children().filter("li");
var b_items = $(banners[0]).children().filter("div");
attr_val = $(".b_items")[0].attr("onclick");

But i couldn't. By the way i don't know from the start that which item will be in the carousel because it's randomized by another function. So i cannot access them with item1 item2 ect.

Thanks.

Answer 1

You can set the url in a data attribute and read easily like this:

<ul id="carousel">
   <li id="item1">
      <div data-url="mylinkhere.com" onclick="window.open($(this).data('url'),'_blank')" style="cursor:pointer;margin-left:-436px;width:996px;height:100%">
      </div>
   </li> 
   <li id="item2">
      <div data-url="myotherlinkhere.com" onclick="window.open($(this).data('url'),'_blank')" style="cursor:pointer;margin-left:-436px;width:996px;height:100%">
      </div>
   </li> 
</ul>

To read:

var b_items = $(banners[0]).children().filter("div");
var link = $(b_items).data('url');

See this fiddle: http://jsfiddle.net/Pontual/pugytfwu/

Answer 2

For me, the following code works as expected (Chrome 44, jQuery 2.1.3):

var s = jQuery('#carousel li div');
s.each(function(i,node) {
    alert(jQuery(node).attr('onclick'));
});

http://jsfiddle.net/aavf1450/

Possible problem is that in your code, you do not wrap the element into $(...), so .attr() is not a valid function, as using indexers on a jQuery object returns raw HTML elements.